React - Prop & State

1) Hook

• state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수를 의미하는 것을 말한다
  (예전엔, Hook을 클래스 컴포넌트 에서만 사용할 수 있었지만, 지금은 함수 컴포넌트에서도 사용할수 있도록 변경되었다)

(1-1) Hook 특징

• useState와 같은 내장 Hook을 몇 가지 제공하고 있으며, 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능하다
  (참고로, Hook은 클래스 컴포넌트에선 동작하지 않고 함수 컴포넌트 안에서만 사용할수 있음)

(1-2) Hook 사용규칙

• 함수 컴포넌트 내부
• Custom Hook 내부
• 함수 컴포넌트 최상위

(1-3) 사용 예 - (함수 컴포넌트)

import React, { useState } from 'react'; // 1

const Test = () => {    
	// useState Hook을 최상위로 호출한 경우
	const [color, setColor] = useState('red'); // 2

	if(5 > 3){                                             
		console.log("true");
	};

	return (
		<div>Hello!</div>
	);
};            
                               
export default Test;

1. useState를 import 한다
2. import했던 useState를 Test 함수 컴포넌트 최상위에 호출 해준다.

• 최상위에 호출해준다는 뜻은 선언해준 Test 함수 컴포넌트의 첫 번째 {} 내부를 의미한다.
  (즉, { } 안에 있는 첫번째줄 코드를 말한다는 뜻)
• useState Hook를 함수 컴포넌트 안에서 호출할때 위치는 상관없이 사용할 수 있다.
  (단, 중첩된 함수와 조건문, 반복문 에선 호출할 수 없음)

🚨 Hook 사용시 주의사항)

import React, { useState } from 'react';

const Test = () => {
	// useState Hook을 최상위에서 호출한 경우
	const [color, setColor] = useState("red"); // O 
    
	// useState Hook을 조건문에서 호출한 경우
    if(5 > 3){                                    
	  const [color, setColor] = useState('red'); // X (Error)
	};                                            

	return (
		<div>Hello!</div>
	);
};                                              

export default Test;

-> 함수 컴포넌트에 조건문, 반복문, 중첩된 함수내에선 Hook을 호출해서 사용하게 될시에 에러가 발생하므로 반드시 함수 컴포넌트의 최상위에서 호출해줘야 한다.

2) State

• state는 컴포넌트가 가지고 있는 상태 값을 의미한다.
  (즉, 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태 값)

(2-1) State 사용

예시코드)

• 버튼을 눌렀을때 font color가 핑크로 변경

import React from "react";
import { useState } from "react";

const Parent = () => {
  const [color, setColor] = useState("red"); // 4~5

  return (
    <>
      <h1 style={{ color: color }}>여기는 메인페이지입니다.</h1> // 1~3
      <button onClick={() => setColor("pink")}>색상 바꾸기</button>
    </>
  );
};

export default Parent;

요약)

• color 라는 state가 처음에 red 라는 색깔의 문자열 초기 값을 담고 있고 h1 태그의 style에 state로 호출한 color에 color를 할당한뒤 button 태그의 onclick을 했을때 이벤트 핸들링이 발생되 setColor state 함수가 h1 태그의 font 색상을 pink로 변경해서 적용시킴을 알 수 있다

순서 요약)
1. 먼저 return문에 h1 태그의 인라인 스타일을 적용한다. (<h1 style={}>)
2. 여러 스타일 속성 중에 변경하고자 하는 것은 Font Color이므로, color를 적용해준다.
(<h1 style={color: ""}>)
3. 만약 color의 value로서 정적인 값이 들어가게 된다면, font 색상을 동적으로 활용할 수 없기 때문에 color : color와 같이 미리 선언한 state 값을 넣어야 한다.
4. 그렇다면 처음 화면이 렌더링될 때 useState hook의 초기값인 “red”에 따라 h1 태그의 첫 배경색은 빨간색으로 그려지게 된다.
5. 만일 예를 들어 useState(’blue’)로 초기값을 변경 했을때 화면에 그려지는 Font Color 또한 파란색으로 변경되어 표시하게 된다.

참고사항 - onClick 이벤트)

• onClick 이벤트는 button에서 발생하는 클릭이므로 해당 이벤트가 발생시키고 싶을 때마다 onClick 이벤트 핸들러를 넣어주고, 실행할 로직을 넣어줘야 한다

3) Prop

• 컴포넌트의 속성 값을 의미하며, 부모 컴포넌트로부터 전달받은 데이터(변수, 함수, state 값, event handler 등등..)를 지니고 있는 객체를 말한다
  (Prop을 통해서 전달하고자 하는 모든 데이터 값들을 자식 컴포넌트로 전달할 수 있다.)

(3-1) Props 사용 법

예시코드)

• 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기

import React from "react";
import Child from "./Child"; // 1

const Parent = () => {
  const food = "떡볶이"; // 2

  return (
    <div>
      <h1>여기는 Parent 페이지 입니다.</h1> 
      <p>{food}</p>
      <Child koreanFood={food} foodEnglishName="ricecake" /> // 3
    </div>
  );
};

export default Parent;

1. Child 자식 컴포넌트를 먼저 선언하고 import 한다.
   (이때, Child 컴포넌트는 공용 컴포넌트로 별도로 컴포넌트를 만들어서 선언후 import 해야 한다)
2. Parent 함수 컴포넌트를 만들어 호출하고 최상위에 food 변수를 선언하고 인라인 방식인 p태그에 넣어준다.
3. 선언한 Chlid 자식 컴포넌트를 return문에 넣어준다.
   (여기서, koreanFood는 ‘자식 컴포넌트가 데이터를 받을 때 사용되는 인식표’ 라고 생각하면 된다. 이때, ‘떡볶이’ 라는 데이터가 food 라는 그릇에 담겨있듯 부모 컴포넌트에서 선언된 food 라는 변수를 자식 컴포넌트에 넘겨줄 때, koreanFood 라는 그릇에 담아 보내준다.)

👍 코드 요약

• Parent 부모 컴포넌트안에 있는 food 변수 데이터를 자식 컴포넌트인 Chlid에 보내주기 위함이다.

예시 코드)

• 부모 컴포넌트로부터 전달받은 데이터를 적용하기

import React from "react";

const Child = (props) => { // 1
  console.log(props); // 2

  return (
    <div>
      <h2>여기는 Child 페이지 입니다.</h2>
      <p>{props.koreanFood}</p> // 3
      <p>{props.foodEnglishName}</p> // 4
    </div>
  );
};

export default Child;

1. Chlid 컴포넌트 옆에있는 매겨변수에 props를 넣어준다
2. console.log()로 부모 컴포넌트로 부터 받은 데이터가 잘 보여지는지 확인한다 -> (React에서 결과값을 console로 확인할때, 개발자 도구 console로 확인해야 한다.)
3. return 문에 props.koreanFood 를 넣는다
4. return 문에 props.foodEnglishName 을 넣는다
   (부모 컴포넌트가 전달해 준 props는 하나의 객체로 합쳐져서 함수 컴포넌트에 전달됩니다. 함수와 마찬가지로 함수 컴포넌트의 매개변수의 이름을 마음대로 지을 수 있지만 부모 컴포넌트로부터 받은 props를 표현한다는 것을 명시적으로 나타내기 위해 const Child = (props) ⇒ {} 라고 매개변수 이름을 짓는 것이 컨벤션 이다.)

👍 코드 요약

• Parent 부모 컴포넌트로 부터 받은 데이터를 props를 이용해 전달 받아서 사용할수 있다.

예시 코드)

• Button Event 함수를 Chlid 자식 컴포넌트로 전달과 적용

import React from "react";
import Child from "./Child";

const Parent = () => {
  const testConsole = () => { // 1
    console.log("테스트 입니다.");
  };

  return (
    <div>
      <h1>여기서는 Parent 페이지 입니다.</h1>
      <button onClick={testConsole}>버튼</button> // 2
      <Child test={testConsole} /> // 3
    </div>
  );
};

export default Parent;

1. testConsole 함수 컴포넌트를 선언하고 "테스트 입니다" 라는 문자열이 console 창에 나타나도록 선언한다.
2. button 태그를 선언하고 버튼을 눌렀을때 이벤트가 일어나도록 onClick에 선언한 testConsole 함수를 호출해준다.
3. 자식 컴포넌트인 Chlid에 test 라는 요소를 testConsole 함수의 데이터를 보내준다.

import React from "react";

const Child = (props) => { // 1
  console.log(props);

  return (
    <div>
      <h1>이곳은 Chlid 페이지 입니다.</h1>
      <button onClick={props.test}>버튼</button> // 2
    </div>
  );
};

export default Child;

1. Child 함수 컴포넌트에 props을 할당한다.
2. return문에 button 태그에 props.test 요소를 넣어준다.

• 이때, 자식 컴포넌트는 부모 컴포넌트로 부터 testConsole 이벤트 함수의 데이터 값을 받아왔으므로 별도로 이벤트 함수를 지정할 필요가 없다! (즉, button 태그에 onClick 이벤트를 넣어주고 props를 통해 가져온 부모 컴포넌트의 데이터 값의 test 요소와 연결시켜야 한다.)

👍 코드 요약

• 부모 컴포넌트에서는 testConsole 이라는 함수를 선언하고, 이 함수가 버튼을 클릭할 때마다 console에 "테스트 입니다." 라는 문구가 출력되는 기능이 실행될 수 있도록 onClick 이벤트 핸들러에 걸어서 사용한 것이다.

prop과 관련하여 구조분해할당을 좀 더 이해하면 쉽게 접근할 수 있다.