[React] State & Props 이해하기

주의❗️ 공부하는 사람의 글입니다.

props

: 버튼을 하나 만들고, 그 버튼을 상속받아 각각의 기능을 하는 버튼으로 만들 수 있다.

state

: 상태
변하는 값은 state로 분리한다.
useState : state 변수는 state 갱신 함수로 받아서 사용해야 리액트 렌더링이 된다.
현 상태를 강제 변경 해주면 안된다!
함수를 이용하여 주소값을 변경하며 렌더링이 되어야 하기 때문이다.

렌더링 조건 : 주소값이 바뀌어야 가능하다

unshift 등으로 직접변경 불가!
useState 렌더링은 주소값이 바뀌어야 가능하다❗️

const 새 배열 = 원본배열.slice()
위와 같이 새 배열에 깊은 복사한 뒤에 (깊은 복사 = 다른 주소값 사용)
새 배열에 원하는 요소를 unshift하여
새 배열 return하면 작동 가능하다
---> 주소값이 다르기 때문!!

과제

App.js 26번째 줄

//변수를 호출하기
setData([tweet, ...data]);

const newTweets = [tweet, ...data];
setData(newTweets)

어떤 것을 state로 관리할지 먼저 봐야 한다

• 내가 지금 전체인지, option에 들어간 건지
  전체면 false, 선택하면 true
• 누르면 필터링된 tweet를 보여주는 상태

Props & State 정리



• state: 상태, 내부에서 변하는 값
  props: 부모 컴포넌트로부터 전달받은 값, 컴포넌트의 속성, 외부로부터 전달받은 값, 읽기전용객체

• useState

  	const [state저장변수, state변경함수] = useState(state초기값)

• React Component에 props를 전달하기

• React에서는 이벤트 처리를 camelCase로 작성

• state와 props 구분 잘 해서 만들기!!

• React는 단방향 데이터 흐름(One-way data flow)을 가진다.
  데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐른다.
  자식 컴포넌트는 props가 어디서 왔는지 알 수 없다.