State를 가장 쉽게 쓰는 방법, useState React 기초

리액트를 JS를 완벽까지는 아니더라도 어느정도 하고 들어가야하는데 그렇지 못하다보니 문법이나 함수를 이해하는데 시간이 꽤 걸리고 있다. 그래서 강의를 여러번 타 강의를 많이 들어야겠다 싶어 찾다가 지금 보는것은 '코딩애플' 유튜브에서 나온 2022 따끈한 new 리액트무료강의를 공부하면서 적어보려한다.

코딩애플 3강 state를 알아보고 useState 사용 +3강 숙제 (링크 아래 첨부)

 

---

useState(state이름, setState변경함수) 아래 코드를 보며 이해해보자!

 

setState는 어떤 일을 하나요?

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.

 

state와 props의 차이점은 무엇인가요?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

언제 props와 state를 사용하는지 더 알고 싶다면 아래의 자료를 확인해보세요.

• Props vs State
• ReactJS: Props vs. State

참고블로그

컴포넌트 State – React

 

 

 

 

import { useState } from "react";

꼭 useState를 사용할 때는 맨위 import를 해야한다. 아니면 오류나고도 왜 그런지 모름

 

 

 

방법

let [지정할 변수이름, 변경도와주는 함수] = useState ('가','나','다')

 위와 같이 코드로 state를 설정한 후 코드를 불러올 때 div안에다가 <h1>와 같은 html 속성을 선택해준 뒤

안에 { }를 이용하여 작성하면 된다.

 

State에 배열로 '코트추천', '우동맛집', '파이썬독학'과 같은 값이 있을때는 첫번째 부터 [0],[1],[2]를 뒤에 같이 붙여주면 호출가능하다

 

 

코딩애플