3.24 [React_Props & State]

---

3.24 [React_Props & State] 헷갈려! 🤯

---

오배이안 🪙

Props 🤯

Props 는 Properties 의 줄임말이고, 컴퍼넌트의 속성을 의미한다.
상위 컴퍼넌트에서 하위 컴퍼넌트로 값을 전달하기 위해 사용하는 속성이다.

특징

• 객체 형태를 갖는다.
• 상위에서 하위로 단방향적인 데이터 흐름을 갖는다. ⬇️⭐️
• Props 는 수정할 수 없는 읽기 전용 값이다. ⭐️
  읽기 전용 값이 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 단방향적 데이터 흐름에 위배 됨

How to use Props 😎

Props를 사용하는 순서

1. 부모의 컴포넌트 내부에 자식 컴포넌트로 보낼 값과 속성을 정의한다.

<Child user ={'나는' + userName }/> 

• 속성 = user
• 전달하고자 하는 값은 중괄호를 사용해 감싸준다 {'나는' + userName }

2. 자식 컴포넌트에 전달인자에 props를 주고 내부에도 props와 속성을 전달한다.

function Child(props){
return (
  <div>
    <p>{props.user}</p>
  </div>
  )}

• 자식 컴포넌트의 전달인자에 props 를 적으면 이 props 가 부모 컴포넌트에서 데이터를 가져오는 역할을 한다.
• props가 객체이니 객체의 프로퍼티 형태인{key : value}와 동일한 형태를 띠게 된다.
  위의 예시의 props 객체 형태로는 {user : '나는'+ userName} 형태인 것이다. 그렇기 때문에 자식 컴포넌트에서 dot notation으로 접근할 수 있는 것이다. {props.user}

3. 전달받은 props를 렌더링한다.

Props children 😎

Props 를 전달하는 또 다른 방식이다.

부모 컴포넌트에서 자식 컴포넌트로 전달할 데이터를 여는 태그와 닫는 태그 사이에 넣는 방법이다.
자식 컴포넌트에도 데이터를 불러올려면 속성명을 children 으로 작성해주어야 한다.

---

State 🤯

State 는 컴포넌트 내부에서 변할 수 있는 값을 의미하고, State(상태) 는 React state 로 다뤄야 한다.
(props는 변하지 않는 값, 읽기 전용 값!)

State hook : useState 😎

React 에서 stat를 다루는 방법 중 하나로 useState 라는 함수를 사용할 수 있다.

useState 사용법

1. 사용할려면 React 로 부터 useState를 불러와야 한다.

import {useState} from 'react';

2. 이후 컴포넌트 내부에서 useState를 호출해준다. 호출한다는 것은 stat라는 변수를 선언한 것과 같고, 이름은 아무렇게나 지어도 된다.

useState 를 호출하게 되면 길이가 2인 배열을 반환하는데 배열[0] 요소는 현재 State 변수이고
배열[1] 요소는 이 변수를 갱신할 수 있는 함수 이다.

function App(){
const [user, isUserCheck] = useState(초기값)

user : 현재 State 변수
isUserCheck : state user를 변경하는 함수
useState : state hook
초깃값 : state 초깃값

State 갱신하기 😎

state를 갱신할려면 현재 state 변수를 갱신할 수 있는 isUserCheck 를 호출해야한다요.

갱신이 필요하다는 말은 컴포넌트 내부에 데이터가 변경되었다는 말이니 보통은 이벤트가 발생하고, 이벤트 핸들러 함수를 통해 State변수를 갱신 하게 됩니다.

위 코드를 가지고 클릭이벤트를 예를 들어보면

클릭이벤트가 발생했다? ---> 해당 이벤트에 대한 핸들러 함수 호출 ---> 핸들러 함수의 내부에 있는 현재 state 변수를 갱신할 수 있는 isUserCheck 를 호출 ---> 호출된 결과에 따라 user 변수가 갱신 ---> 갱신된 user 변수를 App 컴포넌트에 넘겨 App 컴포넌트 다시 렌더링

사진을 보면서 예시를 생각해보라!
체크박스를 클릭할때마다 콘솔에 rerendered? 가 찍히는걸 볼 수 있다. 즉, 갱신된 현재 state 변수 user 로 인해 App 컴포넌트가 계속 렌더링되고 있는걸 알 수 있다!

• 주의

React state는 상태 변경 함수 호출로 변경해야 한다. 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.

• React의 이벤트 핸들러 사용은 DOM의 이벤트 핸들러 사용 방식과 유사하지만 차이점도 있긴하다.

1. React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용한다.

2. JSX 문법을 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다.

   DOM의 이벤트 핸들러 사용방식

   <button onclick="handleEvent()">Event</button>

   React의 이벤트 핸들러 사용방식

   <button onClick={handleEvent}>Event</button>

---

Controlled Component 이란? 🤯

React는 state(상태) 즉, 컴포넌트 내부에서 변할 수 있는 값에 해당하는 데이터를 따로 관리하고 싶어한다. 그렇기 때문에 state를 통제할 수 있는 컴포넌트 가 존재하는데 이를 Controlled Component 라고 한다.

---

어떤 것을 상태(State) 로 두어야 할까? 🤯

상태는 최소화하는 것이 가장 좋다. 상태가 많아질수록 애플리케이션은 복잡해지기 때문이다.

상태로 두어도 괜찮은지 확인하는 법 😎

• 부모로 부터 props를 통해 전달되는지? (Y/N)
• 시간이 지나도 변하지 않는지? (Y/N)
• 컴포넌트 안의 다른 state 나 props 를 가지고 계산이 가능한지? (Y/N)

대답이 Y 라면 State 가 아니다. 🤢

상태의 위치? 😎

상태(State)가 특정 컴포넌트에서만 유의미하다면 그 컴포넌트에만 상태를 두면 되니까 문제가 되지 않지만
만약 두 개의 서로 다른 컴포넌트가 특정 상태(State) 에 의존적일 경우에는?

두 개의 컴포넌트를 공동적으로 소유하는 상위 컴포넌트를 찾아서 거기에 상태를 두어야 한다!