개념 - state/props

state

state는 한국말로 말하자면 상태이다.
사람으로 예시를 들자면 사람은 시간이 지나면 배가 고파지고 밥을 먹으면 배가 불러진다. 그리고 또 시간이 지나면 배가 고파진다. 이렇게 인간의 허기 상태는 계속해서 변한다. 그리고 그 상태에 따라 사람은 다른 행동을 하게 된다.

즉 state는 계속해서 변화하는 특정 상태를 말하며, 상태에 따라 각각 다른 동작을 한다.

state 사용방법

1. useState를 임포트한다.

import React {useState} from "react";

2. useState를 선언한다

const [state, setState] = useState();

count는 초기값이다. 평범한 출력을 하는 태그가 있다고 하자.
< div > 0 < /div >
이런 태그가 있다면 0이라는 이름의 태그가 있을것이다
그런데 여기서 0이라는 값을 계속 변화시킬 것 이다. 이것을 useState를 이용한다면

3. useState의 초기값을 넣고 state로 텍스트를 채운다.

const [state, setState] = useState(0); // 초기값인 0을 useState() 괄호 안쪽에 넣어준다
<div>state</div>	// state는 useState에서 처음 선언한 초기값을 보여주고 계속해서 변화한다. 

이렇게 선언하면 된다.

자 이제 state를 어떻게 변화시킬 수 있을까? 그건 바로 setState를 이용하면 된다. 바로 setState() 괄호 안에 변화할 state의 값을 넣어주면 된다. 예시로 알아보자.

만약 버튼을 눌렀을 때 마다 값이 state가 써져있는 값이 1 증가한다고 하자.

그렇다면 < button >+< /button > 이렇게 버튼을 생성해준다.
그리고 버튼을 누를 때 마다 숫자를 증가시킬 함수를 하나 만들어준다.

4. setState()의 값을 채워주고 함수로 집어넣는다.

const onIncrease = () => { // 콜백함수
  setState(state + 1);	// onIncrease 함수가 실행될 때 마다 setState를 통해 state의 값을 1씩 증가시킨다.
};

그 후 버튼을 클릭할 때 마다 onIncrease 함수를 실행시킨다

5. 버튼에 이벤트로 함수를 넣어준다.

<button onClick= {onIncrease}>+</button>

이렇게 한다면 버튼을 클릭할 때 마다 onIncrease 함수가 실행되고 그 안의 setState로 인해 state의 값에 1을 더해줄 것이다.

props

컴포넌트를 만들고 그걸 다른 컴포넌트에서 사용할때 < component /> 라는걸 사용하는 걸 알고 있다. 그런데 이때 부모에서 자식으로 값을 전달하려면 어떻게 할까? 이럴때 사용하는게 props이다.

props 사용방법

1. 부모에서 자식에게 줄 값을 정한다

<component a={1} initialValue={5} /> // 여러개를 전달해도 된다. a와 initialValue 전달

2. 자식에서 export default component; 로 사용할 component 함수에 콜백함수 부분에 매개변수로 props를 준다.

const component = (props) => {	// props가 바로 {a : 1	, initialValue : 5} 가 된다.
  ...
}

여기서 props는 객체로 전달이 된다.

그래서 이 props를 useState에서 사용하려면

3. useState에 props값 주기

const [state, setState] = useState(props.initialValue); // 점 표기법으로 접근

유용한 방법. 객체를 따로 만들어서 그 객체를 전달할 수도 있다.

const counterProps = {
  a : 1,
  b : 2,
  c : 3,
  initialValue 5,
};

<component {...counterProps} /> // 스프레드 연산자로 counterProps의 객체들 전달

그리고 객체의 특정한 값만 자식 컴포넌트에서 받고 싶다면 비구조화 할당 방법을 사용한다

const component = ({initialValue}) => {	// counterProps의 객체 중 initialValue의 키값을 가저와 바로 사용한다.
  
const [state, setState] = useState(initialValue); // initialVlaue의 value 값을 초기 상태로 둔다.
  ...
}