리액트를 다루는 기술 #react2 [리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 7장 컴포넌트의 라이프사이클 메서드 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하다. Hooks 기능을 활용해 함수컴포넌트에서도 비슷한 작업은 가능하다. 라이프사이클 메서드의 이해 마운트 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props 에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링.. 2022. 5. 3. [리액트를 다루는 기술] 6장 컴포넌트 반복 6장 컴포넌트 반복 자바스크립트 배열 map()함수 문법 callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 arr.map(callback,[thisArg]) map함수를 활용한 컴포넌트 반복 key key 설정key 값은 언제나 유일해야 한다. 단, 고유한 값이 없을 때만 index값을 key로 사용 → index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 불가 key 값을 설정할 때는 map함수의 인자로 전달되는 함수 내.. 2022. 5. 2. 이전 1 다음