State

• state : 상태
• 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
• state는 화면에 보여줄 컴포넌트의 UI 정보(상태) 이다.
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있다.

State 정의

함수 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 정의하는 방법

Function component | state

import React, { useState } from 'react';

function State() {
	**const [color, setColor] = useState('red');**

	return (
      <div>
        <h1>Function Component | State</h1>
      </div>
  );
}

export default State;

• 함수 컴포넌트에서 화면에 나타내고 싶은 JSX 요소가 return문 안에 들어있다.
• state를 설정할 때는 화면에 보이듯이  useState 함수를 import 한 후 사용해야 한다.
  • useState 함수는 컴포넌트 선언문(function State())과 return 문 사이에 작성한다.
  • useState 함수에 초기값('red')을 인자로 넣어 호출하면 배열을 반환한다.
• 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수이다.
• 즉, 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 함수를 setColor로 그리고 color의 초기값을 red로 정의했다.

→ 함수 컴포넌트의 state는 useState hook을 사용하여 정의한다.

State 사용 예시

state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함이다.

• return 문 안에 <h1> 타이틀 요소가 있다.
• 해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우,
• 다음의 순서대로 state 값을 특정 요소에서 반영할 수 있다.
• 우선 JSX 요소에 인라인 스타일을 적용하기 위해, 그 중에서도 글자색을 설정해주기 위해 다음과 같이 작성한다.
  

<h1 style={{ color:  }}>Function Component | State</h1>

• useState 함수를 사용하여 지정한 state를 담는 변수, color라는 변수를 color 속성의 value로 지정해주었다.
  

<h1 style={{ color: color }}>Function Component | State</h1>

// key값 color는 색상을 부여하기 위한 속성
// value 값 color는 useState 함수를 통해 초기값인 'red'를 담고 있는 변수

Event & State 변경

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');
	
	return (
      <div>
        <h1 style={{ color: color }}>Function Component | State</h1>
				<button onClick={() => setColor('blue')}>Click</button>
      </div>
  );
}

export default State;

• <h1> 태그 아래에 <button> 요소를 추가해주었다.
• 다음의 순서에 따라서 코드가 실행된다.
  1. <button> 요소에서 onClick 이벤트 발생
  2. color라는 상태값을 갱신하는 함수, setColor 함수 실행
  3. setColor 함수를 실행시키면서 인자로 넘겨준 값 'blue'에 의해 color의 값이 'red' 에서 'blue'로 변경
  4. 상태값이 바뀌게 되면서 함수 컴포넌트가 다시 render 되고 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경

Props

• props : properties(속성)
• 단어 뜻 그대로 컴포넌트의 속성값이다.
• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
• props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수, state 값, event handler 등)

Props 객체

함수 컴포넌트에서 props, 즉 컴포넌트의 속성을 정의하는 방법

// Parent.js

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

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
			<Child />
    </div>
  );
}

export default Parent;

• Parent.js : 부모 컴포넌트
• 부모 컴포넌트 안에서 <Child/> 컴포넌트를 import 후 <h1> 태그 아래에 위치해주었다.
• 부모의 state에 있는 데이터를 <Child /> 컴포넌트에게 props를 통해 넘겨보겠다.

// Parent.js

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

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
	  **<Child titleColor={color} />**
    </div>
  );

export default Parent;

• 자식 컴포넌트의 props 로 titleColor 속성을 생성해주었다.
• titleColor의 값으로 color, 즉 부모 컴포넌트의 state인 color 값을 전달해주었다.
• 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.

- props 객체

• 컴포넌트의 props는 객체이다.
• Child.js 내부에서 props 객체가 어떻게 생겼는지 확인해보자.

// Child.js

import React from 'react';

function Child(props) {
	// console.log(props);

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

• <Child /> 컴포넌트 내부에 <h1> 태그가 있다.
• 해당 태그의 글자 색상을 부모 컴포넌트의 state로 부터 전달 받은 데이터를 지정해주도록 한다.
• 함수 컴포넌트는 부모가 전달한 props를 인자로 받는다.
• return 문 위에서 props 값을 console.log로 확인한다.
• 결과 확인 시 props 객체 안에 부모로 부터 전달받은 데이터가 key-value 형태로 담겨 있는 것을 확인할 수 있다.

<h1 style={{color : props.titleColor}}>Child Component</h1>

// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

• 컴포넌트 내부에서 부모 컴포넌트로부터 전달받은 props 데이터를 사용하기 위해서는 props 객체의 특정 키값, 즉 props.titleColor 이렇게 작성해주면 된다.

Props & event

props를 통한 event handler 전달

// Parent.js

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

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
			<Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );

export default Parent;

• props 객체를 통해 state 데이터 뿐만 아니라 부모에서 정의한 event handler 함수도 넘겨줄 수 있다.
• props의 changeColor 값으로 Parent 함수에서 정의한 setColor 함수 자체를 넘겨주고 있다.
• <Child /> 컴포넌트에서 props로 전달받은 handleColor 함수를 활용하는 방법은 아래와 같다.

// Child.js

import React from 'react';

function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
			**<button onClick={props.changeColor}>Click</button>**
    </div>
  );
}

export default Child;

• <Child /> 컴포넌트 내부에 <button> 태그가 있다.
• 다음의 순서에 따라서 코드가 실행된다.
  1. <button> 요소에서 onClick 이벤트 발생
  2. 이벤트 발생 시 props.changeColor 실행
  3. props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 setColor 함수 실행
  4. setColor 함수 실행 시 state의 color 값이 'blue' 로 변경
  5. <Child /> 컴포넌트에 변경된 state 데이터(color) 전달
  6. props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경