[리액트] State & Props (끌어올리기)

임승민·2022년 8월 11일

리액트

React

목록 보기

7/14

hook

💡 hook이란 기존 함수 컴포넌트에선 사용할 수 없었던 state, lifecycle등을 사용할 수 있게 해주는 함수이다.

hook은 함수 컴포넌트와 커스텀 hook 안에서만 사용할 수 있다.
함수 컴포넌트 최상위에 호출해야 한다.
- 리액트는 hook을 순서대로 구분하기에 최상위 부터 순서대로 호출하는 것이 좋다.
사용할 hook은 import 해야하며 아래의 방식을 참고로 작성하면 된다.

import React, { useState } from 'react'; ⭐️

const Login = () => {
	const [id, setId] = useState('simon');⭐️
	return (
		<p> hello {id}! </p>
	)
};
export default Login;

hook은 절대로 함수 내에서 호출해서는 안되며 그중 반복문, 조건문, 중첩된 함수 안에서는 호출하면 많은 에러를 야기할 수 있으므로 호출해선 안된다.

props

💡 props는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다.

컴포넌트 내부 최상단에 변수를 선언해주면 자식 컴포넌트도 부모 컴포넌트의 변수를 사용할 수 있다.
부모 컴포넌트와 자식 컴포넌트에 똑같은 변수를 선언하는 것은 비효율적이여서 props를 사용한다.
props는 원하는 모든 데이터 타입을 자식 컴포넌트에 전달할 수 있다.
표현식{} 을 이용해 호출해야 한다.

import React from 'react';
import Child from './Child';
const Parent = () => {
  const frute = '레몬';

  return (
    <>
      <p>{frute}</p> // 레몬
			<Child lemon={frute} apple="사과" />
    </>
  );
};

export default Parent;

전달하고 싶은 데이터를 컴포넌트 최상단에 선언 해준다.
그리고 전달하고 싶은 자식 컴포넌트 태그 안에 key={value} 형식으로 전달한다.
1. 띄어쓰기로 값을 구분한다.
2. 변수가 아닌 스트링을 전달하고 싶으면 따옴표를 이용한다.
부모로 부터 전달 받은 데이터를 사용하려면 자식 컴포넌에 데이터를 담은 하나의 객체가 인자로 전달 된다.
1. props = {lemon:’레몬', apple:’사과’} 와 같은 식으로 전달 된다.
2. 따라서 전달된 props는 객체기 때문에 key에 접근해 데이터를 얻는다.
전달된 props를 사용하려면 자식 컴포넌트의 매개변수명을 지어준다. (관습적으로 props를 사용한다.)

import React from 'react';

const Child = (props) => {
  return (
    <>
			<p>{props.lemon}</p> //레몬
			<p>{props.apple}</p> //사과
    </>
  );
};

export default Child;

State

💡 state는 UI에 보여줄 정보를 결정할 때 사용 가능한 상태값이다.

데이터를 보관하는 2가지 옵션은 변수와 state가 있다. 그중 state는 변수대신에 사용할 수 있는 데이터 저장 공간이다.
웹을 App처럼 사용할 수 있게 해준다.
- 데이터가 바뀌면 데이터를 담고있는 html이 새로고침 없이 리렌더링 된다.
- 하지만 변수는 데이터가 바뀌면 새로고침 된다.
직접 할당으로 state를 변경하면 바뀐값을 기준으로 화면이 변하지 않는다. setState로 state를 변경하면 업데이트와 함께 화면을 리렌더링을 한다.
useState는 hook이기 때문에 리액트에서 import 해와야 useState 함수를 사용할 수 있다.

import React, {useState} from 'react';

선언

const [state, setState] = useState('hello');

useState로 반환되는 값을 구조 분해 할당(설명 예정)을 통해 각 변수에 담아서 사용한다.
state: useState의 인자가 첫요소의 초기값이된다.
- 동적으로 관리하는 상태값이다.
setState: setState를 수정하면 state를 수정하는 함수이다.
모든 데이터 타입이 들어갈 수 있다.
- 배열도 넣을 수 있고 아래처럼 배열 인덱스에 접근해서 호출할 수도 있다.

const [id, setId] = useState(['simon','tom']);
//생략
<p>{id[0]}</p> // simon

구조 분해 할당

const frutes = ["레몬", "오렌지", "사과"];
console.log(frutes[1]); // "오렌지"
//구조 분해 할당
const [lemon, orange, apple] = ["레몬", "오렌지", "사과"];
console.log(orange); // "오렌지"

구조 분해 할당을 이용하면 기존 배열 처럼 인덱스에 접근하지 않고 배열 요소에 변수를 선언해서 변수만 호출하면 배열의 요소를 반환할 수 있다.

useState & event

useState와 event를 이용해서 아래와 같이 버튼 클릭시 글자색과 글자가 바뀌는 기능을 구현할 수 있다.

const [color, setColor] = useState('green')
//생략
<p style={{color:color}}>{color}</p>
<button 
onClick={()=>{setColor(color === 'green' ? 'blue' : 'green')
}}>클릭</button>