[React] State, Props

1. state

• state: 상태
  state란 화면에 나타날 컴포넌트의 UI상태이다. 컴포넌트 내에서 상태값이 정해지면 함수를 통해 값의 업데이트가 얼마든지 가능하다. 과거 함수형 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트를 사용하곤 했다. hook등장한 이후 hook은 react state를 함수 안에서 사용할 수 있게 해준다.

1-2. useState 사용하기(class형과의 비교)

💿 state 선언하기

// class형 컴포넌트

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

// 함수형 컴포넌트

import React, { useState } from 'react';

function App() {
const [state, setState] = useState(0);
}

• class형을 사용할 때는 contructor안에서 this.state를 {count:0}으로 설정함으로써 count를 0으로 초기화했다.
• 함수형은 this를 가질 수 없기 때문에 hook을 호출한다.
• Hook인자로 넘겨주는 값은 state의 초기값이다.
• 그렇다면 useState는 무엇을 반환할까?
  • state변수, 해당 변수를 갱신할 수 있는 함수 이 두가지를 쌍으로 반환한다.
  • 대괄호 왼쪽에는 변수명을, 오른쪽에는 함수 이 문법을 "배열 구조 분해"라고 한다.

💿 state 가져오기

• 함수형에서는 변수명만 적어주면 된다.

// class형

<p>You clicked {this.state.count} times</p>

// 함수형

 <p>You clicked {count} times</p>

💿 state값 변경하기

// class형

 <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

// 함수형
import React, { useState } from 'react';

   function App() {
     const [count, setCount] = useState(0);
 
     return (
       <div>
       // count 변수의 값을 업데이트하려며 setCount 함수를 호출하면 된다
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
       </div>
    );
  }

1) useState를 react에서 가져온다.
2) useState를 이용하면 state변수와 해당 state를 업데이트 할 수 있는 함수가 쌍으로 반환된다.
3) 사용자가 버튼을 클릭하면 onClick이벤트가 실행되면서 setCount 함수를 호출하여 state 변수의 값을 갱신한다. react는 count라는 변수를 App 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링 한다

클래스형은 상태값을 업데이트하기 위해 this를 호출하지만 함수형 컴포넌트는 변수와 변수를 갱신하는 함수를 동시에 가지고 있으므로 this를 호출하지 않아도 된다. hook의 등장으로 class형 컴포넌트를 혼합하여 사용하지 않고도 상태를 변경할 수 있게 되었다.

2. Props

• property: 속성
  props는 속성을 나타내는 데이터이다. 우리가 어떤 값을 컴포넌트에게 전달해줘야 할 때 props를 쓴다. props를 통해 부모 컴포넌트는 자식 컴포넌트에게 모든 자바스크립트 값을 전달해줄 수 있다.

2-2. props 사용하여 값 전달하기

App이라는 부모컴포넌트에서 Example이라는 컴포넌트를 사용할 때 greeting이라는 값을 전달

// App(부모)

import React, { useState } from 'react';
import Example from '../pages/Example/Example';

function App() {
  return (
    <div>
      <Example greeting="Hello" />
      </div>
      );
    };
    
// Example(자식)

import React from 'react';

function Example(props) {
  return (
    <div>
      <div>{props.greeting}</div>
      </div>
      );
    };

App이라는 부모컴포넌트에서 Example이라는 컴포넌트를 사용할 때 색상을 전달

// App(부모)

import React, { useState } from 'react';
import Example from '../pages/Example/Example';

function App() {
  const [color, setColor] = useState('tomato');
  
  return (
    <div>
      <Example greetingColor={color} />
      </div>
      );
    };
    
// Example(자식)

import React from 'react';

function Example(props) {
  return (
    <div>
      <h1 style{{color: props.greetingColor}}>Hello !</h1>
      </div>
      );
    }; 

2-3. props를 지정하지 않았을 땐? defaultProps!

• 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 defaultProps를 설정하면 된다.
• 아래와 같이 코드를 작성한 뒤 부모 컴포넌트인 App에서 Example을 greenting 없이 실행하면 good-bye 가 출력된다.

import React, { useState } from 'react';
import Example from '../pages/Example/Example';

function Example() {  
  return (
    <div>
      <h1>{greeting}</h1>
      </div>
      );
    };
Example.defaultProps = {
  greeting: "good-bye"
}

2-4. props.children

• 컴포넌트 사이에 넣은 값을 알고 싶을 땐 props.children을 사용하면 된다
• 위에서 만들었던 Example 컴포넌트에 Hello라는 컴포넌트를 추가했다

// Hello
import React from 'react';

function Hello() {
  return (
    <div>
    </div>
  )
}

// App
import React from 'react';
import Example from './Example';
import Hello from './Hello';

function App() {
  return (
    <Hello>
     <Example />
     <Example />
    </Hello>
  );
}

위 예시에서는 Hello 사이에 있는 Example이 보이지 않는다. 내용을 보이게 하려면 props.children 을 렌더링해줘야 된다.

import React from 'react';

function Hello({ children }) {
  return (
    <div>
      {children}
    </div>
  )
}

good-bye라는 문구가 출력된다

참고 자료🙇🏻‍♀️:
React 공식 문서
벨로펀트와 함께하는 모던 리액트