📌 목차

✨ 초보자를 위한 리액트 강좌

💁🏻

1. 강의 소개
2. 설치(create-react-app)
3. 컴포넌트,JSX
4. 첫 컴포넌트 만들기
5. CSS 작성법
6. 이벤트 처리
7. state,useState
8. props
9. 더미 데이터 구현
10. 라우터 구현 react-router-dom
11. json-server,REST API
12. useEffect,fetch()로 API 호출
13. custom Hooks
14. PUT(수정),DELETE(삭제)
15. POST(생성),useHistory
16. 마치며
17. 부록: 타입스크립트 적용하기

state,useState

state는 컴포넌트가 가지고 있는 속성값이다.

이 속성값이 변하면, React는 자동으로 속성값을 업데이트 해준다.

=> 그러므로 속성값을 잘 관리하면 화면을 다시 그리지 않아도 된다.

이렇게 하면 console창에는 이름이 바뀌면서 출력되지만 브라우저 화면에는 이름이 바뀌지 않는다.

import React from "react";

export default function Hello() {
  let name = "Mike";

  //이름이 Mike일 때는 이름을 Jane으로, Jane일 때는 Mike로 바꿔주는 함수
  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    console.log(name);
  }
  return (
    <div>
      <h1>state</h1>
      <h1>{name} 컴포넌트의 속성값</h1>
      {/* 클릭하면 이름을 바꿔주는 버튼 = 이름바꾸는 함수를 실행시키는 버튼 */}
      <button onClick={changeName}>Change</button>
    </div>
  );
}

바닐라 자바스크립트를 사용해서 버튼을 누를 때 마다 브라우저에 출력되는 이름이 바뀌게 해주려면

import React from "react";

export default function Hello() {
  let name = "Mike";

  //이름이 Mike일 때는 이름을 Jane으로, Jane일 때는 Mike로 바꿔주는 함수
  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    console.log(name);
    document.getElementById("name").innerText = name;
    //돔을 업데이트해주는 자바스크립트 코드
  }
  return (
    <div>
      <h1>state</h1>
      <h1 id="name">{name} 컴포넌트의 속성값</h1>
      {/* 클릭하면 이름을 바꿔주는 버튼 = 이름바꾸는 함수를 실행시키는 버튼 */}
      <button onClick={changeName}>Change</button>
    </div>
  );
}

리액트에서 브라우저에 출력되는 이름을 바꿔주려면 useState를 사용해야한다.

Hook은 React 16.8버전부터 사용할 수 있다.

초기 react는 state와 라이프 사이클을 관리하려면 클래스형 컴포넌트를 만들어야 했다.

그리고 단순히 ui만 표현해주는 컴포넌트만 함수형으로 제작했다.

하지만 16.8 버전부터는 모든 컴포넌트를 함수형으로 만들 수 있게 되었고

이 react훅을 이용해서 함수형 컴포넌트에서도 state와 라이프 사이클 관리가 가능해졌다.

자주 쓰는 훅들 중 하나인 useState훅을 사용해보자.

import React from "react";
import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState('Mike');
  //Mike는 초기값.
  //[]안에는 변수와 변수를 바꿔줄 함수를 넣으면 된다.
  //이 문법은 배열 구조 분해를 사용한 것이다. - 익숙하지 않으면 구조 분해 할당 강의 참고.

  //이름이 Mike일 때는 이름을 Jane으로, Jane일 때는 Mike로 바꿔주는 함수
  function changeName() {
    const newName =  name === "Mike" ? "Jane" : "Mike";
    setName(newName)
    //위의 코드 두 줄은 아래처럼 한 줄로 줄일 수 있다.
    //setName(name === "Mike" ? "Jane" : "Mike");
  }
  return (
    <div>
      <h1>state</h1>
      <h1 id="name">{name}</h1>
      <button onClick={changeName}>Change</button>
    </div>
  );
}

아니면 버튼 onClick안에 setName함수를 바로 넣어줄 수도 있다.

import React from "react";
import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState('Mike');

  return (
    <div>
      <h1>state</h1>
      <h1 id="name">{name}</h1>
      <button
        onClick={()=>{
          setName(name === "Mike" ? "Jane" : "Mike")
        }}
      >
       Change
      </button>
    </div>
  );
}

동일한 컴포넌트라도 state는 각각 관리된다.

다른 스테이트에 영향을 미치지 않는다.