230306 숙달을 위한 메모: props, useState편

반응형

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

0. 프로젝트 생성

yarn create vite 프로젝트이름 --template react

---

1. 모듈 설치 및 실행

yarn
↓
yarn dev

---

2. React 의 변수와 상태 (props, state)

최종적으로 보여주는 페이지인 app.jsx에서 css 초기화 만들어 놓고 진행하기

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

2 - 1. props 비구조화 할당

props 는 properties 의 줄임말로,상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용된다.
JS에서 말하는 argument라고 생각하면 될 것 같다.
props 를 받아올 때는, 비구조할당을 쓰는 것이 가장 좋은데,아래와 같이 변수를 분해하면서 받아오는 것을 말한다.

예시

const data = {'name': '누구누구', 'age': 10}
↓
const {name, age} = data

예시 코드

import React from 'react'

function Intro(props) {
	const {name, age} = props // js에서 하는 비구조화할당과 모양이 같다.

  return (
    <div>이름은 {name}, 나이는 {age} 입니다.</div>
  )
}

export default Intro

 

2 - 2. props기본 값 및 타입 설정

props 를 따로 지정하지 않았을 때, 기본값을 설정하는 방법은 아래와 같다.

예시

import React from 'react'

function MyName({ name }) {
  return (
    <div>{name}</div>
  )
}

MyName.defaultProps = {
  name: '내 이름'
}

export default MyName

위 내용을 줄여본다면 다음과 같다.

import React from 'react'

function MyName({ name='내 이름' }) {
  return (
    <div>{name}</div>
  )
}

export default MyName

리액트의 경우에도 타입을 선언해 둘 수 있는데, 귀찮을 수 있겠지만
개인적으로는 타입을 선언해주는게 좀 더 확실하고 안정성 유지에도 도움을 줄 수 있어서
아래처럼 prop-types 라는 라이브러리를 설치 후($ yarn add prop-types) 사용할 수 있다.

예시

import React from 'react'
import PropTypes from 'prop-types';

function MyName({ name }) {
  return (
    <div>{name}</div>
  )
}

MyName.propTypes = { // 주의!!!!! -> 메소드로 불러올 땐 propTypes p가 소문자
  name: PropTypes.string // 주의!!!!! -> 데이터 타입을 선언하고자 할 땐 PropTypes P가 대문자
  // name의 props타입은 String문자열이다.
}

export default MyName

만약 위에 선언한 name props는 문자열로 선언을 했는데, 여기에 다른 데이터 타입을 넣으면
에러가 날 수 있으니 유의할 것. 선언한 데이터타입과 다르면 에러가 발생하는건 당연하다.

더 나아가 필수로 받아야 하는 컴포넌트로 위의 예시를 바꾼다면, isRequired라는 키워드를 넣어야한다.

예시

import React from 'react'
import PropTypes from 'prop-types';

function MyName({ name }) {
  return (
    <div>{name}</div>
  )
}

MyName.propTypes = {
  name: PropTypes.string.isRequired //무조건 데이터를 받을 수 있도록 키워드 추가하기
}

export default MyName

 

---

3. state: onClick Event

가령 버튼을 눌렀을 때 카운트가 증가하는 기능을 구현해 본다고 하자
App.jsx는

import "./App.css";
import Count from "./components/Count";

function App() {
  return (
    <div className="App">
      <Count />
    </div>
  );
}

export default App;

Count.jsx는 아래처럼 작성해서 App.jsx로 가져오자

function Count() {
  let start = 0;
  const countUp = () => {
    start = start + 1;
    console.log(start);
  };

  return (
    <div>
      {start}
      <br/>
      <button onClick={countUp}>카운트증가</button>
    </div>
  );
}

export default Count;

위처럼 작성했을 때, 버튼을 아무리 눌러도 console.log(start)의 내용만 찍힐 뿐, 브라우저에서의 변화는 없다.
그 이유는 react의 특성 때문인데,
변수에 state를 사용하지 않으면 react는 값이 변했다고 인지하지 않아 반영을 해주지 않는다.
때문에 값이 변경될 때마다 해당 부분에 변경된 값을 보여 줄 수 있도록 useState를 활용해야한다.

 

useState의 기본형태

const [변수명, set변수명] = useState(변수의 초기값);
↓
const [start, setStart] = useState(0);

여기서 setStart는 위의 예시에 선언한 start의 값을 변경하고자 할 때 도와주는 함수라고 생각하면 편하다.
그래서 setStart에 데이터를 담아주면 이를 통해 react는 새로 랜더를 해준다
setStart(dataRender) == 버튼을 누를 때마다 setStart(1), setStart(2) ... 이런식으로 랜더링되는 것

그래서 useState를 이용한 Count.jsx의 내용은 아래와 같다.

import React, { useState } from 'react'

function Count() {
  const [start, setStart] = useState(0);
  const countUp = () => {
    setStart(start+1);
  };

  return (
    <div>
      {start}
      <br/>
      <button onClick={countUp}>카운트업!</button>
    </div>
  )
}

export default Count

 

이렇게 변경하면 버튼을 아무리눌러도 변화가 없던 전과 달리 카운팅이 +1이 되는 모습을 볼 수 있다.

다음은 배열과 불변성에 대한 메모!