hook

• 상태(state)와 라이프 사이클(lifecycle) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 함수
• 사용 규칙
  - 함수 컴포넌트 내부에서 호출
  - 커스텀 훅 내부에서 호출
  - 최상위에서 호출
• 종류: useState, useEffect, useCallback 등

import React, { useState } form 'react';

const Login = () => {
	const [color, setColor] = useState('white')
	...
	return (
		...
	)
}

export default Login;

props

• 컴포넌트의 속성값
• 부모 컴포넌트로 전달받은 데이터를 지닌 객체
• 전달받는 데이터는 변수, 함수, state 값, 이벤트 핸들러 등 상관 없음

// Parent.js

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

const Parent = () => {
	const name = '창선';

	const testClick = () => {
		console.log("테스트");
	}

	return (
		<div>
			<span>이름: {name}</span>
			<button onClick={testClick}>버튼</button>
			<Child 
				name={name} 
				englishName='Changsun'
				testClick={testClick}
			 />
		</div>
	)
}

export default Parent;

// Child.js

import React from 'react';

const Child = (props) => {
	return (
		<div>
			<span>{props.name}</span>           // 창선
			<span>{props.enlgishName}</span>    // Changsun
			
			// 부모 컴포넌트에서 함수를 받아서 이벤트 핸들러와 연결 시 해당 기능을 사용할 수 있습니다.
			<button onClick={props.testClick}>버튼</button>	
		</div>
	)
}

export default Child;

state

• 컴포넌트의 상태값
• 컴포넌트의 UI를 결정하는 상태값
• hook 중 하나인 useState 함수가 필요

import React, { useState } form 'react';

const Login = () => {
	// 배열 안의 첫 번째 요소는 동적으로 관리할 상태값입니다.
	// 배열 안의 두 번째 요소는 첫 번째 요소를 업데이트하는 Setter 함수입니다.
	// useState 함수 안의 인자는 초기값입니다.
	const [color, setColor] = useState('white')
	
	return (
		<div>
			<p 
				style={{ backgroundColor: color }}
			>Hello, World!</p>

			// 버튼 클릭 시 Setter 함수가 실행되면서 페이지 컴포넌트가 리렌더링(re-rendering)되고, p 태그의 배경색이 Setter 함수의 인자인 검은색으로 변경됩니다.
			<button onClick={() => setColor('black')}>색상 변경</button>
		</div>
	)
}

export default Login;

props와 state의 조합: state 끌어올리기

// 부모 컴포넌트에서 state 값을 자식 컴포넌트에 props로 전달하는 경우(state 끌어올리기)
// Parent.js

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

const Parent = () => {
	const [color, setColor] = useState('white');

	const changeColor = () => {
		setColor('black');
	}

	return (
		<div>
			<Child color={color} change={changeColor} />
		</div>
	)
}

export default Parent;

// 부모 컴포넌트에서 state 값을 자식 컴포넌트에 props로 전달하는 경우(state 끌어올리기)
// Child.js

import React from 'react';

const Child = (props) => {
	return (
		<div>
			<p>{props.color}</p>
			<button onClick={props.change}>색상 변경</button>
		</div>
	)
}

export default Child;