[Day 31] 컴포넌트 재사용

🚀 학습 목표

• 컴포넌트 재사용을 통해 컴포넌트 구조를 효율적으로 설계할 수 있다.
• 컴포넌트가 넘겨받는 Props 값에 따라 서로 다른 UI를 보여줄 수 있다 (조건부 렌더링).
• props.children의 사용법에 대하여 이해한다.

📌 컴포넌트

---

재사용이 가능한 UI의 단위

📌 컴포넌트 분리 기준

---

UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋습니다.

📌 Mock data 이름 기준

---

• ALL CAPITAL LETTERS WITH UNDERSCORES
• 예) LOGIN_DATA

📌 조건부 렌더링

---

• if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용. 현재 상태에 맞게 UI를 업데이트 된다.

📌 실습

---

1] 실습 준비: https://study.wecode.co.kr/session/assignment/36

2] [kakao] 리스트 뷰 / 카드 뷰 구현해보기: https://study.wecode.co.kr/session/assignment/55