두서없이 작성된 내용이며 그날그날 배운 내용을 노트에 정리한 글입니다. 😀

map() 문법

arr.map(callback,[thisArg])

• callback
  1. currentValue : 현재 처리하고 있는 요소
  2. index : 현재 처리하고 있는 요소의 index 값
  3. array : 현재 처리하고 있는 원본 배열
• thisArg
  : callback 함수 내부에서 사용할 this 레퍼런스

key

• 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용
• 유동적인 데이터 일 경우 key가 있으면 더욱 빠르게 변화를 감지
• key 값은 언제나 유일해야 함

고유값이 없을 때만 index 값을 key로 설정

• 단, 배열이 변경될 때 효율적으로 리렌더링을 못함

유동적인 데이터 렌더링

1. 초기 상태 설정
   • useStae 를 사용하여 상태 설정
   • 3가지 상태 설정
     1. 데이터 배열
     2. 텍스트 입력할 수 있는 input 상태
     3. 데이터 배열에 새로운 할목을 추가할 때 사용할 고유 id를 위한 상태
2. 데이터 추가 기능 구현
   • 배열에 새 항목을 추가할 때 concat 을 사용
     • concat : 새로운 배열을 만들어 줌 (불변성 유지)-> 리액트 성능 최적화 가능
3. 데이터 제거 기능 구현
   • 불변성 유지하며 데이터를 지울 땐 filter 를 사용

라이프사이클 (수명 주기)

• 모든 리액트 컴포넌트에 존재
• 주기는 렌더링 시작 전 준비과정에서 페이지가 사ㅏㄹ질 때까지

라이프 사이클 메서드

• Will 접두사
  : 어떤 작업을 자동하기 전에 실행되는 메서드
• Did 접두사
  : 어떤 작업을 작동한 후 실행되는 메서드

라이프 사이클 카테고리

마운트

• DOM이 생성되고 웹 브라우저상에 나타나는 것

업데이트

• 4가지 경우에 업데이트
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. this.forceUpdate로 강제로 렌더링을 트리거할 때

언마운트

- 마운트의 반대 과정, 컴포넌트를 DOM에서 제거하는 것

라이프사이클 메서드 살펴보기

render()

• 컴포넌트 모양새 정의, 필수 메서드
• this.props, this.state 에 접근 가능, 리액트 요소를 반환
• 주의
  : 이 메서드 안에서 이벤트 설정이 아닌 곳에서는 setState 사용 못함, 브라우저의 DOM에 접근 못함

constructor()

• 초기 state 정의

getDerivedFromProps()

• props로 받아 온 값을 state에 동기화 시키는 용도
• 마운트, 업데이트될 때 호출

componentDidMount()

• 이 메서드 안에서 비동기 작업 처리

shouldComponentUpdate()

• props 또는 state를 변경했을 때, 리렌더링을 시작할 지 여부를 지정
• 반드시 true 또는 false 값 반환
• 기본 값으로 true, false로 반환되면 업데이트 과정 중단
• props.state, nextProps, nextState 접근 가능

getSnapshotBeforeUpdate()

• render() 에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출
• 반환 값은 componentDidUpdate 에서 세 번째 파라미터인 snapshot 값으로 전달 받을 수 있음

componentDidUpdate()

• 리렌더링 완료 후 실행
• DOM 관련 처리해도 무방
• prevProps 또는 prevState 를 사용하여 컴포넌트의 이전 값 접근 가능

componentWillUnmount()

• 컴포넌트를 DOM에서 제거할 때 실행
• componentDidMount 에서 등록한 작업을 여기서 제거

componentDidCatch()

• 렌더링 도중 에러 발생시 오류 UI를 보여 줄 수 있게 해줌