[JUSTCODE] Basic Foundation - React useState, props

Hooks

• Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수
• use로 시작되는 것들은 내장 Hook이다.

사용이유

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 위해
• 관심사의 분리를 위해

사용규칙

1. 최상위에서만 Hook을 호출해야한다.
2. React 함수 컴포넌트 내에서만 Hook을 호출해야한다.

 

State

컴포넌트 내부에 가지고 있는 컴포넌트의 상태값(화면에 보여줄 UI의 상태)

 

정의하는 법

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState();
		
	return (
      <div>
        <h1>Function Component | name</h1>
      </div>
  );
}

export default State;

import에서 React옆에 {useState}를 달아준다.

 

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;

useState=("초기값"); 이기 때문에 처음에는 빨간색이지만, 클릭 시 컬러를 파란색으로 바꾼다.

 

 

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} contentColor={color} />
    </div>
  );


export default Parent;

// Child.js

import React from 'react';

function Child(props) {
	// console.log(props);
	// {
  //    titleColor: 'red',
  //    contentColor: 'red'
	// }

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

export default Child;

Child 함수에서 props를 객체로 받아온다.

Parent 함수에서 props로 내려받은 color를 props.titleColor로 사용한다.

이 방법 외에도 구조분해할당을 이용하여, {color}객체만 가져오는 방법도 있다.

 

props & event

// Parent.js

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

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


  // const changeColor = () => setColor('blue');
  function changeColor() {
    setColor('blue');
  }

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


export default Parent;

// 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;

parent 함수에 있는 changeColor 함수를 props로 가져온다.