221211 6주 차 - WIL

App.jsx가 우리가 작업할 공간

return 안에 하위 컴포넌트를 넣어줌!

return (
        <div className='container'>
            <Header>My Todo List</Header>
            <AddForm />
            <TodoList />
        </div>
    );

App의 하위 컴포넌트들은 props를 받을 수 있다.

컴포넌트 이름 태그 안에 props를 써주면 됨!

여는 태그와 닫는 태그 사이에 있는 text가 기본 children props가 된다.

export default function Header({children}) {
  return (
    <header className='head'>
       <h1>{children}</h1>
    </header>
  );
}
// children : My Todo List

리액트는 사용자가 만들어 놓은 .jsx코드를 렌더링 함

state와 props의 변화에 따라 동적으로 렌더링을 함

 

const [todo, setTodo] = useState

☞ setTodo를 해서 state를 변경.

 

state가 바뀌면 화면이 다시 갱신된다.

input 태그에서 중요한 건 onChange와 value!!

onChange에 의해서 input value값이 set 된다.

 

form 태그 안의 버튼을 클릭하면 onSubmit이 호출된다.

 

useState('') -> [state, setState] --> 구조 분해 할당 --> const [state, setState] = useState('')

useState가 return 하는 값이  [state, setState]

 

---

이번 주부터 리액트를 시작했다.

아직 자바스크립트도 제대로 못 해서 걱정부터 앞섰다..

그렇지만 강의 들을 거도 많고 해야 할 거도 많아서 열심히 달렸다.

리액트 입문 과제로 나온 TodoList 만들기 때문에 또 한 번의 고비가 왔다.

고통에 몸부림을 치고 있었는데 금요일과 오늘 해주신 원장님의 보충 강의가 엄청 많이 도움이 됐다.

다른 사람의 코드를 보고 이해하고 따라쓰면서 우여곡절 끝에 완성은 했지만

온전히 내 실력으로 완성한 게 아니라서 썩 기분이 좋지는 않다.

그래도 이번 주에는 뭐라도 배운 기분도 들고 이해가 되는 부분도 늘어서 아주아주 느리지만 조금씩 성장하고 있다는 기분이 들었다.

이번에 완성한 코드를 계속 보면서 코드 분석하고 이해하고 강의도 여러 번 돌려 보면서 리액트를 조금 더 알아갈 생각이다.

자바스크립트 문법도 아직 다 모르지만 너무 여기에만 매달려있는 거도 좋지 않다고 해서 내 페이스에 맞게 리액트와 잘 병행해서

공부를 해나가야겠다.

이번 주부터 다른 대원과 노션으로 Todo-List를 만들어 아침에 오늘 할 목록을 적고 체크하기로 했는데

잘 이행되지는 못했던 거 같다.. 둘 다 멘탈이 나가 있었기 때문에...

내일부터는 이 투두 리스트도 잘 이행하도록 해봐야겠다.

다음 주에는 카페 가서 공부하는 게 일단 목표!

햇빛을 보러 가자....😅