[React] 2. state와 props

저번 포스트에서 컴포넌트 만들었읍니다.

컴포넌트는 함수형으로 선언한다고 했읍니다.
그러면 html뿐만 아니라, 변수 선언도 가능하고 데이터도 주고 받을 수 있음

근데 변수 중에서 좀 자주 쓰이고, 중요한 것들은 state라는 걸로 만듭니다.

const a = 123;

const [a, b] = useState(123);

뭐가 막 달라보이는데,
둘 다 console.log(a) 찍으면 똑같은 123 나올걸요

state는 그냥 변수인데, 좀 중요하고 자주 쓰이는 것, 쉽게 변하면 안되는 것들 state로 변수 선언 하시면 됩니당

근데 const [a, b] = useState(123);에서 b는 뭔가요

state는 중요한 변수 저장할 때 쓴다고 했잖아요,

중요한 변수니까 함부로 변하면 안되겠죠?

그래서 state의 값을 변화시킬 땐, state 변경 함수로 따로 변경해야함

그래서 state 선언할 때,

[state 변수명, state 변경함수]
이렇게 배열로 선언합니다

const [변수, set변수] = useState(값)

보통 이렇게 씀

자 이제, 우리는 리액트에서 중요하고, 자주 쓰이는 변수들을 state로 만들었어요,

그럼 이 state를 다른 컴포넌트에서 막 갖다 써도 되나여?

ㄴㄴ

컴포넌트끼리 데이터 주고받을 때는, props 라는걸 써야합니다.

사실 컴포넌트는 이런 식으로 겹겹이 쌓여있어요
러시아 인형 그 마트료시카 생각하시면 될듯

근데 리액트에서는 컴포넌트를 포함하고 있는 상위 컴포넌트를 부모-자식 관계라고 부릅니다.

근디 리액트에서, state를 주고받는건,
부모 -> 자식 끼리만 가능함.

자식이 부모한테 주는 패륜전송,
자식끼리 주고 받는 불륜전송 안됨.
고마워요 코딩애플!

부모.jsx

import 자식 from "./자식 경로/자식.jsx"

const 부모 = () => {
  const [변수, set변수] = setState("데이터");
  return(
  	<div>
      <자식 변수={변수} />
    </div>
  )
}

자식.jsx

const 자식 = (props) => {
  return(
  	<div>{ props.변수 }</div>
  )
}
export default 자식;

먼가 복잡한데 하나도 안복잡합니다.

부모 에서 선언한 state를 자식 컴포넌트에 보내주고,

자식 컴포넌트에서 props라는 우체통에서 받아서,
원하는 곳에 뿌려주면 됩니다

헉 그럼 자식한테 자식(손자)이 또 있으면요?

그럼 부모 -> 자식 -> 손자 순으로 또 보내주면 됩니다. props 써서.
근데, 중간에 자식 건너뛰고 부모 -> 손자로 바로 보내줄 순 없읍니다.

근데 컴포넌트 상하관계가 100개, 1,000개 중첩 되어있으면
겁나 불편할텐데, 그래서 redux같은 상태관리 라이브러리 쓰면 편함