📅 학습 일자 : 22. 12. 07

📜 진행 내용

• [과제] 알고리즘 문제 풀기
• [과제] 리액트로 Todo list 만들기
• [특강] 리액트 Todo list 과제 리뷰
• [자습] 리액트 추가 학습

---

💡 배운내용

▣ 리액트 과제 리뷰

• 화면 리렌더링 기준은 useState 함수로 묶여있는 값(state)이 setState로 변경될 때이다.

• state는 사용자가 직접 변경이 불가능하다.

  • state 변경을 하고 싶을 경우 useState 함수를 사용해 setState값이 변경되어 state값에 전달되게 한다.

• component 태그 사이의 요소값을 children 키워드로 접근할 수 있다.

  • 예) < Header > 여기는 children입니다. < /Header >

• 리액트 파일 확장자는 js, jsx 둘다 가능하지만, 컴포넌트가 들어가면 jsx로 사용하는게 맞다.

▣ 리액트의 State와 리렌더링

■ State

• state란?

  • 컴포넌트 내부에서 변경이 일어나는 값
  • 개발자가 의도한 동작에 의해 변경할 수 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다.
  • state 값이 변경되고 리 렌더링이 필요한 경우에 리액트가 자동으로 계산하여 변경된 부분을 렌더링 한다.

• state 만들기

  • state를 만들 때는 useState()를 사용한다.

    👉 state 값을 직접 변경하게 되면, 리액트가 component를 다시 렌더링 할 타이밍을 알아차리지 못한다.

• state 변경하기

  • state를 변경할 때는 반드시 setValue(바꾸고 싶은 값)를 사용한다.

    • state 값을 개발자가 직접 변경해서는 안된다!

      👉 setValue( ) 함수를 사용시 변경할 값을 직접 넣거나, 함수를 넣을 수 있다.

  • 함수를 넣는 경우, 함수가 리턴하는 값으로 state가 변경된다.

  • 현재 값을 기반으로 state를 변경할 경우 함수를 넣는 방법이 적합하다.

    1) setState 내에 변경할 값을 넣기

    const [count, setCount] = useState(0);
    setCount(count + 1);

    2) setState에 함수를 넣기

    const [count, setCount] = useState(0);

■ 리렌더링 조건

1. state(상태) 변경이 있을 때
   • 리액트는 state 변경이 감지되면 리렌더링 한다.
   • 상태를 변경한다는 것은 setState함수를 실행할 때, 리액트 트리거가 업데이트된다는 것을 의미한다.
     • 트리거 : 이벤트에 반응해 자동으로 실행 되는 작업
2. 새로운 props가 들어올 때
   • 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트도 리렌더링 된다.
3. 기존 props가 업데이트 됐을 때
   • 부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 리렌더링 된다.
4. 부모 컴포넌트가 리렌더링 될 때
   • 부모 컴포넌트가 업데이트되어 리렌더링 되면, 자식 컴포넌트도 리렌더링 된다.

---

🎯 문제와 해결

• 과제를 하다가 에러가 발생했을 때, 에러 문구를 검색해서 빨리 처리하고 넘기느라 정리를 못했다. 추후 동일한 상황을 위해 에러 해결 부분을 정리하자..

⁉️ 어려웠던 내용

• todolist 과제 - 컴포넌트로 분리해서 기능 구현하기

❎ 한 번 더 공부할 내용

• 참고자료 내용 다시 정독하기
• todolist 과제 기능 보완하기

---

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 todolist 과제 리뷰 특강
• (번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?
• [react] 리렌더링이 되는 조건들 살펴보기
• 리액트 State란?
• 리액트 재렌더링 조건 & 렌더링 성능 최적화 방법