react props와 state

props

컴포넌트 사이에서 데이터를 주고받을 수 있게 하는 것.

 

// App.js
function App() {
    const name = 'hobs';
    const enrolled = 'yes';
    
    return (
    	<div>
            <Paper student={ name } class={ enrolled } />
            // Paper.js 컴포넌트에게
            // 변수 name을 student라는 props로,
            // 변수 enrolled를 class라는 props로 넘겨줌.
        </div>
    );
}

// Paper.js
function Paper(props) {
    return (
        <div>
            <p>{props.student}</p> // 'hobs' 출력
            <p>{props.class}</p> // 'yes' 출력
        </div>
    );
}

 

상위 컴포넌트인 App.js가

하위 컴포넌트인 Paper.js에게 데이터를 전달해주고 있음.

props는 이렇게 하위 컴포넌트로만 전달이 가능함.

 

1.

만약 상위 컴포넌트인 App.js가

하위 컴포넌트인 Paper.js를 거쳐

최하위 컴포넌트인 Paper2.js에게 데이터를 전달한다면 어떻게 해야할까?

 

// Paper.js
function Paper(props) {
    return (
        <div>
            <Paper2 student={props.student} class={props.class} />
        </div>
    );
}

// Paper2.js
function Paper2(props) {
    return (
        <div>
            <p>{props.student}</p> // 'hobs' 출력
            <p>{props.class}</p> // 'yes' 출력
        </div>
    );
}

 

중간에 낀 Paper.js만 위 예시처럼 바꿔주면 됨.

 

 

2.

만약 데이터가 500개라 500줄을 다 보여줘야한다면 어떻게 할까?

 

// App.js
const data = [
    {company: 'apple', say: 'iPhone 12, Blast past fast.'},
    {company: 'samsung', say: 'Galaxy S21, Buds Pro.'},
    {company: 'LG', say: 'Innovation for a Better Life.'},
];

return (
    <div>
        { data.map((item) => 
            <Paper name={ item.company } txt={ item.say } />
        ) };
    </div>
);

// Paper.js
function Paper(props) {
    return(
        <h2>{ props.name }</h2>
        <p>{ props.say }</p>
    );
}

 

이렇게 해주면 아래와같이 개수만큼 잘 나온다.

 

 

 

 

state

리액트에서는 변수값이 변경된다는 것을 반영하지 못함.

let counter = 0;
const incrementer = () => {
    console.log(counter);
    counter += 1;
};

return (
    <div>
        {counter}
        <button onClick={incrementer}>증가</button>
    </div>
);

아무리 버튼을 눌러봐도 변수 counter는 변하지 않지만,

콘솔에서는 잘 변경되고 있음.

 

// 상단에 useState import
import {useState} from 'react';

// useState 선언을 해줘야 함.
// useState() 괄호 안에는 배열, 객체, 숫자, 불리언, 텍스트 등 여러 데이터가 들어감.
// 하나의 useState를 생성하면 배열 형태로 [변수, 변수수정할수있는함수]가 자동생성 됨.
const [counter, setCounter] = useState(0);
const incrementer = () => {
    // 변수를 수정할때는 항상 '변수수정할수있는함수'를 통해서 수정해야함.
    setCounter((prev) => prev + 1);
};