리액트(React)에서 state와 props에 대한 개념정리

안녕하세요~ 이번에는 리액트에서 State와 props에 대해 알아보고 각각 무엇을 뜻하고, 어떻게 사용되는지 한번 이번 내용을 통해 알아보도록 하겠습니다.

📑목차
1. state
1-1. state란?
1-2. state 특징
1-3. 클래스형 컴포넌트 state
1-4. 함수형 컴포넌트 state 
2. props
2-1. props란?
2-2. props 특징
2-3. 클래스형 컴포넌트 props
2-4. 함수형 컴포넌트 props

서론

리액트에서 state와 props를 학습하기전, node에서 혹시 res.json({state: 200, message : "응답 성공!"}) 이런 형식에 대한 응답 요청을 보신적이 있으신가요? node 에서 "state" 는 상태 코드를 나타냈습니다. 리액트에서도 state는 "상태" 라는 비슷한 뜻을 가집니다. 그럼 props는 무엇인지 짐작할 수 있을까요? props(properties) 말 그대로 "속성" 이라는 뜻입니다. 그럼 state와 props에 대해 직접적으로 알아보도록 하겠습니다.

본론 

1. state 

 

1-1. state란?

컴포넌트 내부에서 변경 가능한 데이터 즉, 컴포넌트의 "상태"를 나타내는 객체이다.

 

1-2. state 특징

 

1. 리액트에서 state는 직접적인 수정이 불가능하다

그 이유는 state는 Component의 렌더링과 밀접한 관련이 있기 때문에, 상태가 변경되면 리액트는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다.  만약 state를 직접적으로 변경하게 되면 리액트는 상태 변화를 감지하지 못해 더이상 UI를 업데이트 하지 못하거나 예기치 않은 오류가 발생합니다. 
2. 상태를 변경할 때는 setState( ) 함수를 사용한다.

state를 직접 변경하는 대신 setState( ) 함수를 사용하여 상태 변화를 렌더링하여 UI를 업데이트하여 화면에 나타나게 합니다.

1-3. 클래스형 컴포넌트 state

 

클래스형 컴포넌트에서 state는 생성자 함수를 호출하면서 모든 state를 한번에 정의합니다.   this.state = { } 이런식으로 말이죠

import React from "react";
// import Card from "./components/card/Card";
import Page from "./components/Naver/page/page";
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      count : 0
    }
  }
  // 카운트를 증가시킬 함수 
  counterHandler = () => {
    this.setState({count : this.state.count + 1})
  }
  // 카운트를 감소시킬 함수
  
  downHandler = () => {
    this.setState({count : this.state.count - 1})
  }

  render(){
    return (
      <>
        {/* <div>count : {this.state.count}</div> */}
        {/* <Card content="안녕"/> 
        <Card content="배고파"/> */}
        {/* <button onClick={this.counterHandler}>증가해줘!!</button>
        <button onClick={this.downHandler}>감소해줘!!</button> */}
        <Page/>
      </>
    )
  }
}
export default App;

이 코드를 보시면  생성자 함수를 호출하면서. this.state 를 통해 상태 변수를 선언하고, this.setState() 함수를 통해 상태 변화를 업데이트한 것을 보실 수 있습니다. 이렇게 클래스형 컴포넌트는 this 바인딩이 일어나기 때문에 코드가 길어지고, 복잡한 컴포넌트를 구현해야합니다. 

 

1-4. 함수형 컴포넌트 state

 

함수형 컴포넌트에서 state는 훅이 등장하면서 클래스형을 대체 부류 할 수 컴포넌트로 급성장하게 되었습니다. 함수형 컴포넌트에서는 this 바인딩이 일어나지 못하도록 막았습니다. 따라서 클래스형 컴포넌트에서 state 상태관리를  함수형 컴포넌트에서는  useState( ) 훅으로  상태관리를 합니다.

import React, {useState} from "react";
import { puppyImg, catImg, lionImg } from "../images";

const SildeImg = () => {
    // 이미지 데이터 객체
    const imageData = {
        puppy : {
            name : "강아지",
            img : puppyImg,
            content : "귀여운 강아지!!"
        },
        cat : {
            name : "고양이",
            img : catImg,
            content : "고양이 톰!!!"
        },
        lion : {
            name : "사자",
            img : lionImg,
            content : "동물의 왕왕"
        }
    }

    const AnimalKey = Object.keys(imageData);

    // 선택한 인덱스, 업데이트할 인덱스
    const [selectIndex , setIndex] = useState(0);
    const [showContent , setContent] = useState(false);

    // 다음 인덱스로 넘어가는 함스
    const nextHandler = () => {
        setIndex((prevIndex) => {
            if(prevIndex < AnimalKey.length -1) {
                return prevIndex + 1
            } else {
                return prevIndex;
            }
        })
    }

    // 상세 내용을 보여주는 함수
    const showHandler = () => {
        setContent(!showContent)
    }
    
    // 현재 선택된 이미지
    const SelectImage = imageData[AnimalKey[selectIndex]];

    return (
        <>
            <div>
                <img src={SelectImage.img} alt={SelectImage.name} />
                <h2>{SelectImage.name}</h2>

            </div>

            <div>
            <button onClick={nextHandler}>다음</button>
            </div>

            <div>
                <button onClick={showHandler}>{showContent ? "내용 숨기기" : "내용 보기"}</button>
                {showContent && <p>{SelectImage.content}</p>}
            </div>
        </>
    )
}

export default SildeImg

이런식으로 코드에서 상태 변수를 선언하고, 업데이트할 함수를 인자로 받으면서 상태 변수를 정의합니다.

    const [selectIndex , setIndex] = useState(0);
    const [showContent , setContent] = useState(false);

 

 

2. props(속성)

2-1. props란?

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

 

2-2. props의 특징

 

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 단방향 데이터 흐름

2. 자식 컴포넌트는 값을 변경할 수 없다.

2-3. 클래스형 컴포넌트 props

클래스형 컴포넌트 props에서는  this.state 에 접근하는 것처럼 this.props를 통해 접근합니다.

import { Component } from "react";
import { BombImage, BoombImageActive } from "../images";

export default class Bomb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isActive : false
        }
    }
    
    componentDidMount() {
        console.log("폭탄 생성되었어요")
    }

    componentDidUpdate() {
        console.log("나 터진다")
    }

    bombActiveHandler = () => {
        if(this.state.isActive) return // 상태를 변환하기 전에 조건부 렌더링
        this.setState({...this.state, isActive : true})
        this.props.setValue();
    }

    render() {
        return (
            <div className="bomb-wrap" onClick={this.bombActiveHandler}>
                <img src={this.state.isActive ? BoombImageActive : BombImage } alt="Bomb"/>
            </div>
        )
    }
}

이 코드에서 왜 props를 사용했을까요? 바로 부모 컴포넌트로 부터 특정 함수나, 특정 데이터 값을 불러오기 위해 사용했습니다.  


2-4. 함수형 컴포넌트 props 

함수형 컴포넌트에서도 마찬가지로 자식 컴포넌트에서 부모 컴포넌트에서 전달한 props를 받아서 해당 props의 주소값을 바라보게 끔 하여 렌더링하는 것입니다.

import React from 'react';

// 자식 컴포넌트
function Welcome(props) {
    return <h2>환영합니다, {props.username}님!</h2>;
}

// 부모 컴포넌트
function App() {
    const user = "이순신";
    
    return (
        <div>
            <Welcome username={user} />
        </div>
    );
}

export default App;

 

 

이 코드를 보시면 자식 컴포넌트에서 props를 인자로 받은 것을 보실 수 있습니다. 부모 컴포넌트에서 전달한 props를 자식 컴포넌트에서 받아서 해당 props의 주소값을 참조하여 렌더링하는 것입니다.

 

결론