[React 기초] State / Props

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 4. React.js 기초

 

 

1. State

2. Props

3. 리액트 렌더링(rendering)

4. 실습 예제

 

---

1. State

- 컴포넌트 내부에서 관리하는 동적 데이터

- 컴포넌트 내부에서 함수를 이용해 값을 변화시킬 수 있는 데이터

import React, {useState} from "react";
const [State의 값 변수, State를 변화시키는 함수] = useState(State 초기값);

 

• useState() : 배열을 반환, 배열의 비구조화 할당
• count : State 값을 나타내는 변수
• setCount : count를 변화시키는 함수
• State 값 변수와 State 변화 함수 이름은 유일 (이름 중복 불가)

 

 

2. Props

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

 

- 부모 컴포넌트에서 자식 컴포넌트를 사용할 때 props를 지정

// 부모Component.js
// 1) 각 props마다 지정
<자식Component prop1={propValue1} prop2={propValue2} ... />

// 2) props 객체를 사전에 생성한 후 Spread
const Props = {
    전달할 props들,
  };
<자식Component {...Props}/>

 

 

- 자식 컴포넌트에선 props를 객체로 받아들임 → props.key로 각각의 값에 접근

- props는 읽기 전용이므로 자식 컴포넌트의 내부에서 props를 수정할 수 없음

- 부모로부터 props 값을 전달받지 못하거나 잘못 입력했을때, defualt 값 지정 가능

// 자식Component.js
const 자식Component = (props) => {
    const [State 변수, State 함수] = useState(props.initialValue);

// default props 지정
자식Component.defaultProps = {
    initialValue: 0,
};

 

 

 

3. 리액트 렌더링(rendering)

- 현재 props와 State를 기반으로 UI를 어떻게 구성할지 컴포넌트에게 작업을 요청하는 것

- React 애플리케이션은 보통 하나의 root DOM 노드가 존재

- root DOM부터 시작해 포함되어 있는 모든 컴포넌트를 찾아 렌더링을 진행

- root DOM은 index.html, index.js와 같은 파일에 기본적으로 설정

 

- 아래와 같이 리액트의 어떤 컴포넌트가 바뀔 때마다 re-rendering(리렌더링) 진행 

• 자기 자신이 가진 컴포넌트가 바뀔 때 (자신의 State가 변화)
• 부모로부터 받은 props 값이 바뀔 때 (부모의 State가 변화)
• 부모가 리렌더링 될 때

 

 

 

4. 실습 예제

- 각 함수 컴포컨트들은 html 코드를 리턴

- jdx에선 html 태그의 attribute로 'id'와 'className' 사용 (원래 html에선 'class')

 

React 실행 화면

 

① App.js : 앱 몸체에 해당하는 부모 컴포넌트

import React from "react";

// 자식 컴포넌트 모듈 불러오기
import MyHeader from "./MyHeader";
import Counter from "./Counter";
import Container from "./Container";

// CSS 파일 불러오기
import './App.css';


function App() {

  const style={
    bold_text:{color:"blue",},
  };
  const number = 5;

  // 자식 컴포넌트에 전달할 props 객체 사전 생성
  const CounterProps = {
    a:1, b:2, initialValue: number,
  };


  // App 컴포넌트의 리턴
  return (
    <Container>	
    {/* <> 태그 사이의 코드가 모두 props에 해당 */}
    
    <div className="App">
    
      <MyHeader/>
      {/* html 태그 리턴 */}
      
        <h2>안녕 리액트</h2>
        <b style={style.bold_text} id="bold_text">
          {number} = {number%2 === 0 ? "짝수" : "홀수"}
        </b>

        {/* 자식 컴포넌트에 props 객체를 그대로 전달 */}
        <Counter {...CounterProps}/>

    </div>
    </Container>
  );
};

export default App;

 

 

② Counter.js : 숫자 count하는 버튼 컴포넌트 

- App.js로부터 초기값 props 전달받음

// React State 불러오기
import React, {useState} from "react";
// 자식 컴포넌트 불러오기
import OddEven from "./OddEven";



const Counter = (props) => {		// 부모로부터 props 전달받음
    const [count, setCount] = useState(props.initialValue);	// props를 객체 형태로 받아들임

    // count 상태를 변화시키는 함수 정의
    const onIncrease = () => {
        setCount(count+1);
    };
    const onDecrease = () => {
        setCount(count-1);
    };

    // Counter 컴포넌트의 리턴
    return (
        <div>
            <h2 style = {{color: "black"}}>카운터 : {count} </h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            
            {/* <OddEven {...count}/> props 객체로 전달 */}
            {/* 혹은, 자식 컴포넌트에게 전달할 props를 직접 지정 */}
            <OddEven count={count}/>
        </div>
    );
};


// default props를 지정
Counter.defaultProps = {
    initialValue: 0,
};

export default Counter;

 

 

③ OddEven.js : count 값이 홀수인지 짝수인지 판별하는 컴포넌트 

- Counter.js로부터 홀수 짝수 판별 대상이 되는 count props 전달받음

const OddEven = ({count}) => {
    // OddEven의 리턴
    return <>{count%2 === 0 ? " 짝수" : " 홀수"}</>
};

export default OddEven;

 

 

④ MyHeader.js : html 헤더 태그를 리턴

const MyHeader = () =>{
    // MyHeader의 리턴
    return <header>헤더</header>
};

export default MyHeader;

 

 

⑤ Container.js : 부모 컴포넌트에서 코드 일부를 모두 props로 전달받는 컴포넌트 

const Container = ({children}) => {
    
    // Container의 리턴
    return (
        <div style = {{margin:20, padding:20, border: "1px solid gray"}}>

            {/* 여기에 props로 전달받은 코드가 들어감 */}
            {children}

        </div>
    );
};

export default Container;

 

 

 

 

 

 

 

 

 

Reference

https://studyingych.tistory.com/52
https://velog.io/@soyi47/React-Component-props-state
https://narup.tistory.com/272