[React] 입문 / Props 응용 / re-render

전달 할 수 있는 Props 종류

1. Component의 State 전달

Counter.js 파일

import React, {useState} from "react"
import OddEvenResult from "./OddEvenResult";

const Counter = () => {
    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count+1);
    }

    const onDecrease = () => {
        setCount(count-1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count}/>	//props에 Component State 전달
        </div>
    );
};

export default Counter;​

OddEvenResult.js 파일

const OddEvenResult = ({count}) => {
    console.log(count);	//Counter Component의 State 값 변경될 때마다 출력
    return <>{count % 2 == 0 ? "짝수" : "홀수"}</>
}

export default OddEvenResult;​

2. JSX Element 요소 전달

Counter.js 파일

import React, {useState} from "react"
import OddEvenResult from "./OddEvenResult";
import Container from "./Container";

const Counter = () => {
    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count+1);
    }

    const onDecrease = () => {
        setCount(count-1);
    }

    return (
        <Container>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count}/>
        </Container>
    );
};

export default Counter;

 

 Container.js 파일

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

export default Container;

 

 

re-render

1. Component 의 State가 변경 될 때, 해당 Component는  re-render 된다.

2. 부모 Component 로 부터 전달 받은 props 가 바뀔 때 마다 부모 Component와 자식 Component가 re-render 된다.

3. 부모 Component 가 re-render 되면 자식 Component 도 re-render 된다.

 

참고

https://espania.tistory.com/351

[React] 입문 / Props

https://espania.tistory.com/350

[React] 입문 / State (상태)