[항해99] TIL D+21

항해톡 왜 신청했지…

• 엄청난 부담이 가해지고 있다.
• 물론 안다 하고 나면 얻는게 상당히 많다는걸
• 근데 그것도 알아야한다.. 끝내기전에는 계속 후회한다는걸...
• 우선 또 익숙하게 밤을 새고 있다.
• 리액트도 바빠 죽겠는데..
• 우선 최선을 다해보자

리액트

• 리덕스만의 문제가 아니다.
• 라우트 기능도 마스터를 해야하며
• v5, v6의 차이점을 잘 알아둬야 한다.

State

state란?

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.
• 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다.
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.
• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

선언방법

• react 모듈에서 { useState }를 불러오고 useState()를 선언해서 사용면 된다.
• useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다.
  • const [state, setState] = useState(initialState);
  • const [ 데이터, 데이터변경함수 ] = useState(초기값(생략가능));

Props

프로퍼티(props)란?

• 프로퍼티, props(properties의 줄임말) 라고 한다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

사용방법?

• 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

프로퍼티의 자료형, 타입 정의

• 프로퍼티의 자료형을 미리 선언할 수 있다. (타입스크립트와도 일맥상통한 부분이 어느정도 있기도 하지만, 지금은 넘어 가자)
• 리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 버그예방에도 도움이 된다.
• 리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언하면 된다.

프로퍼티 기본값 설정 및 필수값 설정

• 기본값 설정 - 컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps를 설정하면 된다.

불리언 프로퍼티 사용하기

• true, false만 정의 가능한 자료형
• 중괄호로 감싸 전달할 필요 없이 프로퍼티의 이름만 선언하면 된다.

props.children 활용하기

• children을 사용하여 내부에 있는 내용을 표현할 수 있다.

리렌더링의 조건

state 변경이 있을 때

• react 에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 state 를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state 의 변경이 감지되면 리렌더링을 해주는 데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다.

새로운 props이 들어올 때

• 전달받은 props 값이 업데이트 됬다면 리 렌더링 된다.

부모 컴포넌트가 렌더링 될 때

• 새로운 prop 이 들어오지 않더라고 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다.

shouldComponentUpdate에서 true가 반환될 때

• 각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있는데 이는 state가 병경되거나 새로운 props를 전달받는경우 실행이 된다 이때 기본적으로 return 값은 true 가 되어 rendering 이 시작되지만 rerendering 이 필요하지 않은 부분이라면 개발자가 return value 를 false 값으로 지정함으로써 리렌더링 되는 상황을 막아줄수 있게된다.

forceUpdate가 실행될 때

• props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드 이다.