[ 원숭이의 TIL ] 원숭이 20일차

20일 된 원숭이

 

 

오늘은 불타는 불토 🔥

남들은 불금이겠지만 항해99 하는 우리에게는 불토다

왜냐하면 주 6일 하고 유일하게 일요일만 쉴 수 있기 때문이지 ( 사실 일요일도 공식적으로 쉬는 날은 아님...ㅠ )

 

오늘은 리액트 기초부터 쭉 봤다. 하지만 스스로 구현하는데 많이 막혔다

특히 props 를 가져다 component 를 만들고 자식이 그걸 가져다 쓰는 것에 대해서 애를 먹었다

 

그래서 계속계속 도전해봤다. 그러더니 뭔가 손에 익숙해지고 머리에 들어오는거 같다!!

쭉 코딩을 이어갔는데 다시 반복문에서 막혀버렸다...

우리가 지금까지 배워온 for 문이나 for in, for of(?) 를 사용하지않고

리액트에서 쓰이는 .map() 을 사용해보려고 노력을했다. 그런데 너무 어려운건 뭐지

 

행해 99 에서 숙제를 내준것에 정답이 있었고 코드스니펫도 있었지만

코드스니펫에 있는 코드 들은 class형 컴포넌트라 내가 직접 함수형 컴포넌트로 구현하고 싶었다. 

정답지는 없지... 그래서 MDN문서를 계속 뒤져 보고 2시간 동안 씨름한 경과

 

드디어!! .map 을 props 로 가져오는 것을 성공했다!! 

남들에게는 굉장히 쉬울지는 몰라도 ㅠㅠ 내게는 엄청난 성과다 원숭이가 드디어 바나나 껍질을 까기 시작했다고 봐도 된다.

 

 

import './App.css';
import BucketList from './BucketList';
import React, { useState } from 'react';

function App() {
  const [list, listChange] = useState(['밥먹기','영화보기','영화관가기'])
  return (
    <div className="App">
      <h1>버킷리스트</h1>
      <BucketList list={list}/>

    </div>
  );
}

export default App;

 

저기 있는 BucketList 에 부모 의 state 를 props 로 받고 싶었고 BucketList 안에는

 

import React from 'react'; 

const BucketList = (props) => {


return (
<div>
{props.list.map((a)=>{
    return (
        <div>{a}</div>
    )
})}
</div>

);
}



export default BucketList;

 

이렇게 되어 있다. 처음에는 

 

<div>
{props.list}
   
</div>

이 상태에서 .map을 어떻게 붙힐까 굉장히 고민을 많이 했다 

결국 여러가지 시도 끝에 {props.list.map()} 이렇게 간단하게 붙히기만 하면 됐었다 ㅠㅠ 이것도 몰랐었네

 

그래도 혼자 시도해서 풀어보는 재미를 느꼈다 이맛에 코딩 하는것 같다

 

 

오늘 한 일 🔥

 

1. 리액트 강의 1-1~ 2-@ 까지 따라하며 쳐보기

 

2. 강의에 나온 답지 그대로 구현하지 않고 useState() 와 .map()을 이용해서 나만의 정답 만들기

 

3. 우리 짱 귀여운 강아지(후추) 밥주기 🐶

 

 

그리고 시작된 저녁 7 or 8시에 시작한 우리 2주차 때 같이 알고리즘 공부했던 유림님과 알고리즘 스터디를 시작했다

 

같이 풀어보니 이해도 잘 되고 같이 하니깐 재밌었다 나랑 유림님이랑 코딩고수가 되면 덩달아 기쁠것 같다