(TIL) 220802~0803_D+27, 28 React State & Props

JulyK9·2022년 8월 10일

React TIL state & props

개발자가 되기 위한 여정

목록 보기

25/35

State

컴포넌트 사용 중 컴포넌트 내부에서 변화하는 값
컴포넌트 내부에서만 사용. 예) Toggle Swtich, Counter
예) 이름, 성별, 출생지

Props

외부로부터 전달받은 값
인자 같이 넘겨받을 수 있음
예) 나이, 현재사는 곳, 취업 여부
컴포넌트의 속성(property)을 의미
부모 컴포넌트(상위 컴포넌트) 또는 다른 구성요소로부터 전달받은 값
컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있음(응? 어떻게?)
객체 형태
함부로 변경될 수 없는 읽기 전용 객체 (immutable)
클래스형, 함수형 컴포넌트 모두에서 사용 가능
정의할 때 속성을 여러개 지정할 수 있음

How to use 'Props'

하위 컴포넌트에 전달하고자 하는 값과 속성을 정의 (2가지 방법)
1. 속성을 정의하고 중괄호를 이용하여 값을 할당
2. 속성을 정의하지 않고 자식 컴포넌트를 여는태그와 닫는태그로 감싸서 그 안에 value 를 넣어 전달
props를 이용하여 정의된 값과 속성을 전달하고 전달받은 prop를 렌더링
1. props를 전달인자로 쓰고 중괄호 안에 props.속성 해주면 값이 렌더링됨

How to use ‘useState’

import 로 useState 불러오기
useState를 컴포넌트 안에서 호출 ⇒ state 라는 변수를 선언하는 것 (일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않음)
문법적으로 보면 아래 예시의 isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수임
useState를 호출하면 배열을 반환 ⇒ 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수
useState 의 인자로 넘겨주는 값은 state의 초깃값

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용
state 갱신
- state를 갱신하려면 state 변수를 갱신할 수 있는 함수를 호출
주의할점
- state가 변경되면 컴포넌트가 갱신되어 새롭게 호출되고 리렌더링됨
- 상태변경 함수(state 갱신 함수) 호출로 변경해야 함 (강제로 변경을 시도하면 리렌더링 안되거나 state가 제대로 변경되지 않으므로 유의!)
  - 강제 변경 예) state.push(1);, state[1] = 2;, state = 'wrong state'; isChecked = true;

React 데이터의 흐름

컴포넌트 단위부터 시작해서 상향식(bottom-up)으로 만들어 나감 ⇒ 테스트가 쉽고 확장성이 좋다
앱의 디자인을 전달받고 나면 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야할 일!
컴포넌트 단일 책임 원칙 ⇒ 하나의 컴포넌트는 한 가지 일만 한다.
와이어 프레임을 작성해보고 ⇒ 그에 따른 트리 구조를 작성해본다
데이터는 위에서 아래로 흐른다(단방향 데이터 흐름 원칙)
⇒ 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받음
⇒ 즉 데이터를 전달하는 주체는 부모 컴포넌트로 데이터의 흐름은 하향식(top-down) ⇒ 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함
앱에서 필요한 데이터가 무엇인지 먼저 정의해봐야 한다
- 전체 트윗 목록, 사용자가 작성중인 새로운 트윗 내용
- 상태로 두어야할지에 대해 고민될 때 질문해볼 것!
  - 모든 데이터를 상태로 둘 필요는 없음. 상태가 많아질수록 애플리케이션은 복잡해지기때문에 최소화하는 것이 좋음. 어떤 데이터를 상태로 두어야 하는지는 다음 세 가지 질문을 통해 판단해보자
    1. 부모로부터 props를 통해 전달되는가? 그러면 확실히 state가 아님
      1. 시간이 지나도 변하지 않는가? 그러면 확실히 state가 아
    2. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 그렇다면 state가 아님
- 상태를 어디에 위치시켜야 하는가?
  - 상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 됨
  - 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면(의존적일 경우) 이때는 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치시켜야 함
  - 즉, 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 소유 컴포넌트인 부모 컴포넌트에 상태를 위치해야 함
React에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정해야 함

과제시 생긴 문제점

객체를 요소로 갖는 배열인 더미데이터에 push 메서드로 tweet(객체)을 추가해주려고 시도했으나 계속 실패
=> 리스트에 값을 담고 싶을 때 보통 push를 사용하지만 state 이기 때문에 push 반영이 제대로 안된다고 함
=> push 메서드는 mutable로 원본을 바꾸기 때문에 state에 영향을 주기 때문에 state 에서는 쓰면 안되는 것 같다
=> 따라서 사본을 만들어서 추가해줘야 하는데 방법은 몇가지가 있는데 아래 레퍼를 참고
레퍼런스
⇒ https://liebe97.tistory.com/13
⇒ http://daplus.net/javascript-react-hooks-usestate의-푸시-방법/
⇒ https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate
⇒ https://selfdevelopcampus.tistory.com/entry/React-Hook-활용하여-Array-push?category=1246961