[항해99 - 4주차] 주특기 기초

📔개발 일기

[항해99 - 4주차] 주특기 기초 - React

IOTrue 2023. 1. 1. 19:46

⚓ 항해99 - 4주차 회고록 (주특기 기초)

회고록 보시기 전에 새해 복 먼저 받으세요~~~🤸‍♂️🤸‍♂️🤸‍♂️

2023년 새해가 밝았다~~~~~~🎉✨

주특기 숙련주차도 밝았다~~~~😀

이번에 진행한 주특기-기초 주차에 대한 회고록을 작성하려고 한다.

리액트를 이번에 처음 만났는데

기초 주차를 진행하면서 리액트 기본 개념에 대해 정말 많이 알게 되어서

아주아주 뿌듯한 한 주였다.

자! 리액트 기초 주차 회고록,

가보자고~!

이번 주 키워드!

😎 State, Props, 리렌더링 발생 조건

State

State
State는 컴포넌트 안에서 관리되고 데이터 또는 정보를 담은 javascript 객체이다.
(함수 내에 선언된 변수처럼)

렌더링된 값을 나타낸다. (화면에 보이는 값)
사용자 또는 네트워크 변경에 따라 state를 수정할 수 있다.
객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 리렌더링한다. (setState()를 사용한다.)

Props

Props (Properties)
Props는 데이터 또는 정보를 담은 javascript 객체이다. (함수 매개변수처럼)

단방향 데이터 흐름 : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
수정할 수 없다. (전달받은 하위 컴포넌트 입장에서는 읽기 전용 데이터이다.)

State 와 Props의 차이

props와 state 는 일반 JavaScript 객체입니다.
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데,
한 가지 중요한 방식에서 차이가 있습니다.
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면
state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
-리액트 공식 문서-

State 와 Props 비교

	State	Props
유스케이스	뷰에 렌더링 되어야 하는 컴포넌트의 데이터를 저장하는 데 사용한다	데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는 데 사용한다
가변성	상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있다	props는 바뀔 수 없다. 한 번 설정되면 props를 변경할 수 없다
업데이트	이벤트 핸들러는 일반적으로 state를 업데이트한다	상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정한다

리액트 리렌더링 발생 조건

state의 변경
setState 메서드를 사용해서 데이터를 변경하면
리액트는 변경을 감지하고 리렌더링 한다. (얕은 복사를 통한 비교)

새로운 props의 전달
전달받은 props 값이 업데이트 되면 리렌더링을 함

부모 컴포넌트의 렌더링
부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 함께 리렌더링 됨

forceUpdate()의 실행
리렌더링을 하고 싶을 경우 사용할수 있는 메서드 (강제 리렌더링)

shouldComponentUpdate에서 true가 반환될 때
각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있고
state의 변경 또는 새로운 props를 전달 받는 경우 실행된다.
이때 기본적으로 return 값은 true 가 되어 렌더링이 시작되고,
리렌더링이 필요하지 않을 경우 return value = false로 지정해서 리렌더링을 막을 수 있다