State, Props, Event

YS·2022년 7월 7일
React
0

react

목록 보기
10/16

Hook의 개요

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

Hook의 특징

  • 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다. 그러나 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없습니다.

  • 100% 이전 버전과의 호환성 Hook은 호환성을 깨뜨리는 변화가 없습니다.

  • 현재 사용 가능 Hook은 배포 v16.8.0에서 사용할 수 있습니다.

Hook을 왜 사용하는가?

  • 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다.
  • 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)
  • Class은 사람과 기계를 혼동시킵니다.

Class형 컴포넌트 vs Function형 컴포넌트

클래스형 컴포넌트?

  • state, 라이프 사이클 때문에 사용
  • 마치 생명체처럼 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음
  • 반면 함수는 한번 호출되고 메모리 상에서 사라짐 => state, 라이프 사이클 불가능
  • 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재

Hook 사용 규칙

  1. 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
  2. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수내에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 cutom Hook 내입니다.)

State

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

State 정의

함수 컴포넌트에서 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 함수에 초기값 ('red')을 인자로 넣어 호출하면 배열을 반환합니다.
  • 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수입니다.
  • 즉, 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 함수를 setColor로 그리고 color의 초기값을 red로 정의했습니다.

State 사용 예시

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

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

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

위의 예시에서 볼 수 있듯이, state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 화면(UI)에 나타내기 위함입니다.

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> 요소를 추가해주었습니다.
  • 다음의 순서에 따라서 코드가 실행됩니다.
    • button 요소에서 onclick 이벤트 발생
    • color라는 상태값을 갱신하는 함수, setColor 함수 실행
    • setColor 함수를 실행시키면서 인자로 넘겨준 값 'blue'에 의해 color의 값이 'red'에서 'blue'로 변경
    • 상태값이 바뀌게 ㄷ되면서 함수 컴포넌트가 다시 render 되고 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경

Props

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

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;
  • Parent.js 부모 컴포넌트 입니다.
  • 자식 컴포넌트의 props로 titleColor 속성을 생성해주었습니다.
  • titleColor의 값으로 color, 즉 부모 컴포넌트의 state인 color값을 전달해주었습니다.
  • 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있습니다.
  • <Child /> 컴포넌트 내부에서 전달 받은 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;
  • 컴포넌트의 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 형태로 담겨 있는 것을 확인할 수 있습니다.

Props & event

// 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> 태그가 있습니다.
  • 다음의 순서에 따라서 코드가 실행됩니다.

    <button> 요소에서 onClick 이벤트 발생
    이벤트 발생시 props,changeColor 실행
    props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 setColor 함수 실행
    setColor 함수 실행 시 state의 color 값이 blue 로 변경
    <Child /> 컴포넌트에 변경된 state 데이터 color 전달
    props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경

profile
YS
"나의 개발 노트"
이전 포스트

<React.StrictMode>

다음 포스트

리액트 snippets 명령어

0개의 댓글