2022년 04월 14일

📚 오늘 도전하고, 배운 것

• BAEKJOON-15650

React

• Stateless 컴포넌트: 컴포넌트 내부에 상태를 관리하지 않고 데이터를 출력하기 위해서만 존재하는 컴포넌트를 말함 (presentation형 컴포넌트, dumb 컴포넌트)
• Stateful 컴포넌트: 상태 저장 컴포넌트 (smart 컴포넌트)
• 단지 용어일 뿐 필요한 방식에 따라 만든다. 보통 대부분의 컴포넌트는 출력만 담당하는 stateless 컴포넌트다. 몇가지의 컴포넌트만이 상태를 관리하고 다른 컴포넌트로 전달한다.

React에서 목록을 렌더링할 때 key를 사용하는 이유

• 리액트가 목록이 업데이트되었을 때 효과적으로 렌더링하기 위해
• key가 없다면 리액트가 어떤 항목이 변경되었는지 구분할 수 없다. 그래서 key가 없다면 하나만 업데이트해야할 때도 모두 업데이트해서 기존에 변경되거나 추가한 위치를 확인해야 한다.
  • 업데이트는 잘되겠지만 성능적으로 좋지 않다. 모든 아이템을 확인해야하기 때문에...버그를 유발할 수도 있다. (해당 아이템 컴포넌트가 상태를 가지고 있는 경우)
• key를 추가하면 리액트에게 어떤 아이템이 업데이트되었는지 알릴 수 있다.
• 데이터에 개별 key 값이 없다면, 배열 순회시 인덱스를 넣어준다.
  • 권장하지 않음, 데이터의 고유 ID는 아니기 때문

🤔 학습하면서 궁금하거나 어려웠던 점

• React에 스타일을 적용하는 방법

🌅 내일은 무엇을?

• 백준 알고리즘 문제 풀기
• React 학습

🖋 log

• 계획한 것에서 쪼금만 더 공부하기를 마음먹었는데 마음먹은 것 처럼 안 된다. 하지만 언제나 그랬듯이 매일 조금씩 해봐야겠다.