늘 겸손하게

생명 주기 메소드는 영어로 LifeCycle Method 라고 부르며 컴포넌트가 브라우저상에 렌더링되고, 업데이트되고, 제거될때 호출되는 메소드입니다. 각 상황에 실행하고 싶은 작업들을 생명 주기 메소드에 포함시켜 실행시킬 수 있고 클래스형 컴포넌트에서만 생명 주기 메소드를 사용 가능합니다. + React 버전 16.8부터 Hook이 추가되었고 useEffect라는 메소드로 함수형 컴포넌트에서도 생명 주기 메소드와 비슷한 작업을 할 수 있게 되었습니다 생명 주기 메소드는 세 가지 상황으로 분류시키면 이해하기 수월해집니다 1. 컴포넌트가 생성됨 ( Mount ) 2. 컴포넌트 업데이트 ( Update ) 3. 컴포넌트 제거 ( Unmount ) [ 컴포넌트가 생성됨 - Mount ] React가 컴포넌트를..

React에서 지원하는 컴포넌트중에는 Pure component 라는 컴포넌트가 존재한다. Pure component에 대해 알아보자. [ React.PureComponent ] Pure component란 순수 컴포넌트로 같은 props와 state에 대하여 동일한 결과를 렌더링하는 컴포넌트라고 할 수 있다. 일반 React.Component로도 React.PureComponent를 구현할 수 있지만 React.PureComponent를 사용하여 성능 향상을 누릴 수 있다. [ PureComponent와 Component의 차이 ] 두 컴포넌트의 차이는 생명주기 함수인 'shouldComponentUpdate'를 어떻게 사용하느냐에 따라 갈라진다. [ shouldComponentUpdate ] 생명주기..

map 메소드를 이용해 배열의 요소들을 출력할때 key props를 요구하는 경우가 많다. key props를 추가하지 않으면 콘솔에 오류가 출력되는것을 볼 수 있다. 왜 key를 props로 요구하는걸까? 해답은 공식문서에 있었다 1. 배열 원소의 고유성 확보 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 1 2 3 4 5 6 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); Colored by Color Scripter cs Key를 선택하는 가장 좋은 방법은 리스트..

[ 제어 컴포넌트 ] 공식문서 HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 출처 : https://ko.reactjs.org/d..