💎 React

state 와 props 개념

ji-hyun 2021. 11. 21. 23:27

각 컴포넌트의 state 는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다.

실제로 각각의 Hook 호출은 완전히 독립된 state 를 가진다.  그래서 심지어 한 컴포넌트 안에서는 같은 custom Hook 을 두 번 쓸 수도 있다.

 

 

 

 

Hook 은 state 그 자체가 아니라 "상태 관련 로직을 재사용하는 방법"이다.

 

 

 

 

Custom Hook 은 기능이라기보다는 컨벤션에 가깝다. 이름이 "use" 로 시작하고, 안에서 다른 Hook 을 호출한다면 그 함수를 custom Hook 이라고 부를 수 있다. useSomething 이라는 네이밍 컨벤션은 linter 플러그인이 Hook 을 인식하고 버그를 찾을 수 있게 한다.

 

 

 

폼 핸들링, 애니메이션, 선언적 구독, 타이머 등 많은 경우에 custom Hook 을 사용할 수 있다. 

 

 

 

 

Class 은 사람과 기계를 혼동시킨다. Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했다. Class 는 최근 사용되는 도구에도 많은 문제를 일으킨다. 예를 들어 Class 는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API 를 제공하고 싶다.

 

 

 

 

클래스는 많은 기능을 한 번에 묶는 데는 성공을 했지만, 그 결과 각각을 따로 쓰기 힘들게 만들어버렸다.

클래스는 State 와 Action(메서드)의 조합이라고 이야기를 했다.

 

 

따라서 State 와 Action 을 각각 따로 분리해서 생각을 할 수는 없다.

 

 

 

 

 

 

 

 

Class 형 컴포넌트 대 Function 컴포넌트

 

클래스형 컴포넌트란

 

state, 라이프 사이클 때문에 사용한다.

마치 생명체처럼 클래스로부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 가 있다.

반면 함수는 한 번 호출되고 메모리 상에서 사라진다. => state, 라이프 사이클 불가능

 

-> 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재

 

 

 

클로저! 함수 컴포넌트에 날개를 달아주는!

2018년 React v16.8 Hooks 첫 배포!

함수는 상태를 저장하지 않는다는데, 어떻게 state, 라이프사이클을 구현했나?

클로저! (함수 안의 함수!)

 

 

 

Hook 사용 규칙 2가지

이 규칙을 지켜주어여 리액트가 각 훅의 상태를 제대로 기억할 수 있다. 혹은 규칙 2에 의해 클래스형 컴포넌트의 메서드뿐만 아니라 기타 일반 함수에서도 사용할 수 없다. 함수 컴포넌트를 위한 기능이니 당연하다.

 

 


1. 탑레벨에서 사용해야 한다.(함수 블록 내 최상위)
2. 함수형 컴포넌트 내에에서만 훅을 호출해야 한다. (예외: custom 훅 = 내가 만든 훅)

일반 js 함수에서는 Hook 을 호출해서는 안된다. 

 

 

 

 

 

 

 

 

 

 

 

State & Event

1. State 

상태

단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트 상태 값

state 는 화면에 보여줄 컴포넌트의 UI 정보(상태)이다.

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 함수는 컴포넌트 선언문(function State()) 과 return 문 사이에서 작성해야 한다.

- useState 함수는 초기값('red') 을 인자로 넣어 호출하면 배열을 반환한다.

- 배열의 첫번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수이다.

- 즉, 위 예제에서는 state 를 담는 변수를 color 로, color 의 값을 갱신하는 함수를 setColor 로 그리고 color 의 초기값을 red로 정의했다.

 

 

 

 

 

 

 

state 사용 예시

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

 

 

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

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

  return (
    <div style={{ color: color }} class="login_background">
      <div class="container">
        <div class="login-container">
          <h1 class="instagram">Instagram</h1>
          <form class="login-form">
            <input
              type="text"
              id="id"
              placeholder="전화번호, 사용자 이름 또는 이메일"
            />
            <input type="password" id="password" placeholder="비밀번호" />
            <button onClick={() => setColor('blue')} class="login-btn">
              로그인
            </button>
          </form>

          <p class="password_forget">비밀번호를 잊으셨나요?</p>
        </div>
      </div>
    </div>
  );
}

export default LoginLee;

 

 

 

 

 

 

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

function LoginLee() {
  const [color, setColor] = useState('red');
  const [따봉, 따봉변경] = useState('따봉');

  return (
    <div style={{ color: color }} class="login_background">
      <div class="container">
        <div class="login-container">
          <h1 class="instagram">{따봉}</h1>
          <form class="login-form">
            <input
              type="text"
              id="id"
              placeholder="전화번호, 사용자 이름 또는 이메일"
            />
            <input type="password" id="password" placeholder="비밀번호" />
            <button onClick={() => 따봉변경('따봉변경')} class="login-btn">
              로그인
            </button>
          </form>

          <p class="password_forget">비밀번호를 잊으셨나요?</p>
        </div>
      </div>
    </div>
  );
}

export default LoginLee;

 

 

Props & Event

 

1. Props

 

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

 

 

 

 

 

2. props 객체

 

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

함수 컴포넌트에서 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 />
    </div>
  );
}

export default Parent;

 

- Parent.js 는 부모 컴포넌트이다.

- 부모 컴포넌트 안에서 <Child/> 컴포넌트를 import 후 <h1> 태그 아래에 위치해주었다.

- 부모의 state 에 있는 데이터를 <Child /> 컴포넌트에게 props 를 통해 넘겨보도록 하겠다.

 

 

그러니까 Child 컴포넌트를 넣어준다.. 그 후 Child 컴포넌트에게 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;

 

- 자식 컴포넌트의 props 로 titileColor 속성을 생성해주었다.

- titleColor 의 값으로 color, 즉 부모 컴포넌트의 state 인 color 값을 전달해주었다.

- 이러한 방식으로 props 를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.

 

 

 

 

 

props 객체

컴포넌트의 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;

 

 

- <Chlid /> 컴포넌트 내부에 <h1> 태그가 있다.

- 해당 태그의 글자 색상을 부모 컴포넌트의 state 로부터 전달 받은 데이터를 지정해주도록 하겠다.

- 함수 컴포넌트는 부모가 전달한 props 를 인자로 받는다.

- return 문 위에서 props 값을 console.log 로 확인한다.

- 결과 확인 시 props 객체 안에 부모로부터 전달 받은 데이터가 key-value 형태로 담겨 있는 것을 확인할 수 있다.

 

 

 

<h1 style={{color : props.titleColor}}>Child Component</h1>

// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

 

- 컴포넌트 내부에서 부모 컴포넌트로부터 전달 받은 props 데이터를 사용하기 위해서는 props 객체의 특정 키 값, 즉 props.titleColor 이렇게 작성해주면 된다.

 

- 다음으로는 props 객체를 통해 부모에서 정의한 event handler 를 전달하는 방법을 살펴보겠다.

 

 

 

 

 

3. props & event

 

props 를 통한 event handler 전달

 

// 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> 태그가 있다.

- 다음의 순서에 따라서 코드가 실행된다.

 

1. <button> 요소에서 onClick 이벤트 발생

2. 이벤트 발생 시 props.changeColor

3. props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달 받은 setColor 함수 실행

4. setColor 함수 실행 시 state 의 color 값이 'blue' 로 변경

5. <Child /> 컴포넌트에 변경된 state 데이터(color) 전달

6. props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경

'💎 React' 카테고리의 다른 글

props 사용법  (0) 2021.11.22
JSX 안에 조건문, 반복문 쓰는 방법  (0) 2021.11.22
리액트 - SPA 개념과 Routing 하는 방법  (0) 2021.11.16
리액트 개론  (0) 2021.11.16
리액트 컴포넌트  (0) 2021.11.14

'💎 React'의 다른글

  • 현재글state 와 props 개념

관련글

댓글

티스토리툴바