react : state와 props

🍫 state

• 사용이유 : react는 한번 렌딩되어 root 내부에 삽입된 엘리먼트들은 화면을 새로고침하거나 ReactDOM을 다시 렌더링 하지 않는 이상 , 업데이트 되지 않는다.
  그래서 내부의 어떤 특정 값을 변경하기 위해서 사용하는 함수가 useState()다.

간단하게 얘기해서 변하는 값들을 하나의 '상태'로 관리하고 변경해주는 것이다.
이렇게 변경된 값은 화면을 새로고침하지 않아도 그 부분만 업데이트 해서 반영해준다.

import { useState } from 'react';

우선 useState 함수를 import 해줘야 사용 가능하다.

const [state 변수명, state 갱신함수] = useState(상태초기값);

위와 같이 작성하여 사용 가능하다.

state 변수명은 말 그대로, 관리할 상태(state)의 변수 이름을 지정하는 것이다.

state 갱신함수는 상태(state)를 변경(갱신)시켜줄 함수다.

useState(상태초기값)에는 이 상태(state)에 초기값을 지정해주는 것이다.

주의할 점은, 위에서 선언한 state(상태)의 값은 오직 state 갱신함수로만 변경 해야한다는 점이다.

아주 간단한 실제 예시를 들어보겠다.

위 그림의 체크박스는
체크가 안되어있을때는 Unchecked라는 문자열을 출력하고,
체크가 되면 Checked!! 라는 문자열을 출력한다.

여기서 state(상태)로 정의할 수 있는건 체크박스의 체크유무일 것이다.
그리고 그 체크유무에 따라 다른 문자열(html)을 렌더링 시키면된다.

function Checkbox() {

  const [isChecked, setIsChecked] = useState(false);
  
  const changeString = () => {
  	setIsChecked(event.target.checked);
  }
  
  return (    
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={changeString} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>  
  )
}

우선 위 예시에서 isChecked를 체크유무 상태의 변수명으로 지정했다.

갱신함수는 isChecked 앞에 set을 붙인 setIsChecked라고 함수명을 지정했다.
(관습적으로 상태 갱신 함수명은 상태명 앞에 set을 붙인 set함수명으로 짓는다.)
그리고 초기값은 false로 지정했다. (체크가 안되어있는 상태)

이제 상태는 잘 선언했다. 그러면 상태(체크여부)에 따라 html만 렌더링 시켜주면 되는 것이다.
<input>태그 안에 checked라는 속성을 부여해 그 속성값으로 위에서 정의한 체크여부 상태값을 넣어줬다.

<input>태그에는 onChange라는 이벤트가 있는데, 이것은 <input>태그에 변화가 일어났는지 감지하는 이벤트다.
그 이벤트가 일어났을 때(onChange 발동) changeString이라는 함수를 실행시키도록 했는데, 이 changeString은 바로 체크여부 상태(isChecked)를 변경시키는 상태 갱신 함수(setIsChecked)를 동작시킨다.

 const changeString = () => {
 	setIsChecked(event.target.checked);
 }

setIsChecked 안에는 변경시킬 상태값이 event.target.checked 로 되어있다.
이는 event가 일어난 input 객체의 check여부를 뜻하고 check가 되어있다면 true값을, 되어있지 않다면 false 값을 반환한다.

체크가 되어있지 않은 상태의 체크박스 (이때 우리가 state(체크여부)의 초기값으로 지정했던 false)에서
체크가 되는 순간 (event.target.checked)가 true로 변경되고. 이게 state(체크여부) 상태로 갱신된다.
정리해서 말하면 우리가 상태로 지정한 변수명 isChecked의 값이 false 👉 true로 변경되는 것이다.

  return (    
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={changeString} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>  
  )

마지막으로 이 변수명을 삼항연산자로 활용하여 원하는 string(html)을 띄울수 있는 것이다.

🍫 Props는?

react는 주로 기능 단위로 독립적으로 컴포넌트를 개발하기 때문에,
부모 컴포넌트와 자식 컴포넌트의 관계가 생기기 마련이다.

function App (){
  return (
    <div>
      ...
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h2>name</h2>
      <p>date</p>
      <p>desc</p>
    </div>
  )
}

이런 식의 컴포넌트 계층구조가 있다고 했을 때 자식컴포넌트(Modal)에서는 부모컴포넌트(App)에 정의된 변수를 그냥 가져다가 쓸 수 없다.

이런 경우, 부모컴포넌트에 있는 변수를 자식컴포넌트에 가져다가 그대로 쓰려면 props를 사용하면 된다.
방법은 다음과 같다.
1. 하위 컴포넌트(자식 컴포넌트)에 전달하고자 하는 값과 속성을 정의한다.
2. 전달받을 컴포넌트에서 해당 값과 속성을 인자로 받는다.

사실 이렇게만 보면 어떻게 쓰는지 모르겠다. 실제 예시를 봐야한다.

const App = () => {
  const item = "하이들";

  return (
    <div>
      <Hi item = {item} />
    </div>
  );
};

const Hi = (props) => {
  return <div>{props.item}</div>;
};

부모컴포넌트인 App과 자식컴포넌트인 Hi가 있다.

App에서 정의한 item이란 변수를 Hi 컴포넌트에서도 사용하고 싶다.

우선 App컴포넌트 본문 내에 있는 Hi 컴포넌트에 속성명(item)과
속성으로 전달할 값({item})을 할당해준다. (아래와 같은 형태로)

<Hi item = {item} />

그러면 이제는 Hi 컴포넌트로 넘어가서 컴포넌트의 인자로 props를 받는다.

이때 중요한건 props는 객체 형태로 전달 된다는 것이다.
이는 어떤 타입의 값도 넣어 전달할 수 있기 위함이다.

const props = { item(지정한 속성명) : item(값) }

아주 간단하게는 자식 컴포넌트에서 이런 형태로 전달받고 있다고 보면된다.
따라서 item(값)을 자식컴포넌트에서 사용하려면 객체의 dot notation에 따라
아래처럼 표기해야 한다는 것이다.

const Hi = (props) => {
  return <div>{props.item}</div>;
};

물론 스프레드 문법을 이용해 아래처럼 전달받는 방법도 있다.

const Hi = ( { item } ) => {
  return <div>{item}</div>;
};

이 경우에는 props(객체명)을 생략하고 이런식으로 사용할 수도 있겠다.

아주 간단한 예를 들었지만, props로는 위에서 설명했던 state 또한 전달받을 수 있다.