React - props, state

1. props

props 란?

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터로 컴포넌트 끼리의 정보교환 방식

• Props는 부모 -> 자식 방향으로만 흐른다.
• Props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props 연결 방법

function App(){
	return <Mother />;
}
function Mother(){
	const name = '엄마';
    return <Child />;
}
function Child(){
	return <div>연결 성공!</div>;
}

props 정보 전달 방법

function Mother(){
	const name = '엄마';
    return <Child motherName={name}/>;
}
function Child(){
	return <div>연결 성공!</div>;
}

motherName 이라는 이름으로 name값을 Child 컴포넌트에게 전달

props 정보 받는 방법

function Child(props){
	console.log(props);
    return <div>{props.motherName}</div>;
}

props는 object 형태이기 때문에 {props.motherName} 식으로 꺼내 사용한다.

props drilling

[부모]->[자식]->[자식의 자식] 식으로 여러 번 데이터를 내려줘야 하는 것을 prop drilling이라 한다.

쓸데 없이 중간에 컴포넌트가 많아지게 되고, 유지보수가 어려워질 수 있다.
이를 피하기 위해 'Redux'와 같은 데이터 상태관리 툴이 있다.

props children

children이란?

자식 컴포넌트로 정보를 전달하는 또 다른 방법

function User(props){
	return <div>{props.children}</div>;
}
function App(){
	return <User>안녕하세요</User>;
}

children의 용도

Layout 컴포넌트 안에 header 컴포넌트가 있고, header 아래에 {props.children}을 통해 props를 받아 렌더링한다.

function App(){
	return(
    	<Layout>
        	<div>메인 컨텐츠</div>
        </Layout>
    );
}

Layout에 있는 header가 보여지게 되고, "메인 컨텐츠" 라는 문장이 Layout의 props로 전달되는 것이다.

결과적으로 header 컴포넌트를 Layout 컴포넌트에서 한 번만 작성하면 여러 페이지에서 보여지게 할 수 있다.

구조 분해 할당과 props

앞서 공부했듯 props는 object literal 형태의 데이터이다.

따라서 우리는 구조 분해 할당을 사용할 수 있다.

function User({name}){
	return <div>{name}</div>;
}

defaultProps

부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값

function Child({name}){
	return <div>내 이름은 {name}입니다.</div>
}

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name 정보를 받기 전까지 name이 없는 상태이다.
Child 컴포넌트에서 직접 부모 컴포넌트에서 props를 받기전까지 임시로 사용할 수 있는 props를 설정할 수 있다.
이 후, 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다.

Child.defaultProps={
	name:'기본 이름'
}

매개 변수가 지정되지 않으면 자동으로 지정해주는 default argument와 비슷하다.

2. State

State란?

컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

만약 const name = '홍길동'; 으로 설정하고 name이 바뀌어야 한다면 state로 생성한다.

State 만들기

useState()를 사용

useState는 state를 만들어주는 리액트에서 제공하는 기능이다.
이 것을 훅이라고 한다.

const [value, setValue] = useState(초기값)

State 변경

state를 변경할 때는 setValue(바꿀 값)를 사용한다.

function Child(props){
	return(
    	<div>
        	<button
            	onClick={()=>{
                	props.setName("김철수");
                }}

            	이름 바꾸기
            </button>
        <div>
    )
}

setName을 통해 바꾼 값을 버튼을 누를 시 저장할 수 있다.

input과 함께 사용하기

function App(){
	const [value, setValue] = useState("");
    
    const onChangeHandler = (event) => {
    	const inputValue = event.target.value;
        setValue(inputValue);
    };
    
    return(
    	<div>
        	<input type = "text" onChange = {onChangeHandler} value = {value}>
        </div>
    );
}

인풋을 받은 값으로 value를 바꿀 수 있다.