본문 바로가기

전체 글

(73)
Component의 라이프 사이클 메서드 개요 클래스형 컴포넌트에서만 사용가능 했으나 리액트의 발전으로 함수형 컴포넌트에서도 사용 가능 (함수형 컴포넌트에서 Hooks를 통해 라이프 사이클 제어 가능) 라이프 사이클 메서드 마운트 정의 페이지에 컴포넌트가 나타남 DOM 생성되고, 웹 브라우저상에 나타나는 것 종류 constructor( ) 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps( ) props에 있는 값을 state에 넣을 떄 사용하는 메서드 render( ) 준비한 UI를 렌더링하는 메서드 componentDidMount( ) 컴포넌트가 웹 브라우저 상에 나타난 후, 호출하는 메서드 업데이트 정의 컴포넌트 정보를 업데이트 업데이트 시기 props, state가 변경될 때 부모 컴..
map() 함수 map함수 용도 반복되는 컴포넌트를 랜더링 가능 map함수 문법 arr.map(callback, [thisArg]) callback 새로운 배열의 요소를 생성하는 함수 파라미터 종류 currentValue 현재 처리하고 있는 요소 index 현재 처리하고 있는 요소의 index값 array 현재 처리하고 있는 원본 배열 thisArg (선택 항목) callback 함수 내부에서 사용할 this 레퍼런스 예제 var numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); import React from 'react'; const IterationSample = () => { const names..
useReducer reducer 정의 상태를 업데이트하는 함수 구조 파라미터 현재 상태, 액션 객체 반환값 새로운 상태 문법 function reducer(객체, action) {} useReducer 문법 useReducer(reducer함수, 기본값); 반환값 number : 현재 상태 dispatch : 액션 발생시키는 함수