Props (3) 썸네일형 리스트형 React의 Props Drilling과 상태관리 👾 Props Drilling이란? Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 👾 Props Drilling의 문제점 • 코드의 가독성이 나빠진다. • 코드의 유지보수가 어렵게 된다. • state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다. 👾 Props Drilling을 방지하기 위한 방법 1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법 2. 상태관리 라이브러리를 사용하는 방법 → 상태관리 라이브러리를 사용하게 되면 .. Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props ⭐️ 과제. React Twittler State & Props → 기본 레이아웃과 css는 코드스테이츠에서 준비한 코드를 fork해서 몇가지 기능만 덧붙이며 학습하는 과제였다. → 상세 컴포넌트를 구현하고, map()을 사용해 리스트를 출력하고, React Router를 적용해 SPA를 구현했으며, state와 props를 이용해 Tweet 전송 Form을 구현했다. 📌 구현 과정 중 Memo 1. defaultValue와 value → defalutValue와 value는 함께 쓰면 둘 중에 하나만 쓰라고 경고가 남. Warning: Tweets contains an inpu.. React 기본, props 사용하기 👾 props란? • props는 컴포넌트의 속성을 의미한다. props는 변하지 않는 immutable한 데이터이다. • props는 부모 컨포넌트에서 자식 컨포넌트로 또는 구성 요소 자체에서 데이터를 전달하는데 사용된다. 즉, 어떤 값을 컴포넌트에게 전달해줘야 할 때 사용한다. • React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다. • props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. • props는 외부로부터 .. 이전 1 다음
