[포스코x코딩온] React 02 state & useState

몇 주차 회고록인지 까먹었다. 리액트는 순수 자바스크립트랑은 비슷하면서도 다른 느낌이다.

그래서 더 기존 자바스크립트 개념이 흔들려서는 안 되겠다고 생각했다.

클래스형 컴포넌트는 잘 사용하지 않지만, 알아두면 좋을 것 같다. 계속 함수형 컴포넌트만 사용하다가 클래스형 컴포넌트를 마주했을 때, 어색하지 않을 정도로만 익혀두자!

state

• React에서 앱의 유동적인 데이터를 다루기 위한 개체
• 컴포넌트 내에서 지속적으로 변하는 특정 값을 관리하기 위해 사용
• state가 변경될 경우 자동으로 재랜더링

 

state 사용

• state의 값을 변경하기 위해서는 반드시 setState 함수를 사용.
• state 값을 임의로 변경X, setState 함수를 이용해서 값을 변경!!
  1. setState 내에 변경할 값 넣기
  2. setState에 함수 넣기

import { useState } from 'react';

function FunctionComponent() {  
  // const [value, setValue] = useState(초기값);
    const [counter, setcounter] = useState(0);
  // 1. setState 내에 변경할 값 넣기
  	setCounter(count+1);
  // 2. setState에 함수 넣기
  	setCount ((num) => {
    	return num + 1
 	}

  return (
	<>
    
        </>
  );
}

 

props 

• 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용 (읽기 모드)
• react는 단방향 데이터 흐름!!
• 변경하고 싶으면 새로운 변수 생성하고 props 값을 복제해서 사용!

 

Dom Element의 Attributes

(나중에 더 자세하게 정리)

• 기본적인 Dom Element(div, span) 들의 Attribute는 camel case로 작성
  • ex) tabIndex, className 등
• 'data- ' 또는 'aria-' 로 시작하는 Attribute는 제외
  • ex) data-type, aria-label 등
• HTML의 Attribute와 다른 이름을 가지는 Attribute가 있다.
  • class → className, for → htmlFor 등
• HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있다.
  • checked → defaultChecked
  • value → defaultValue
  • style은 객체 형태로 작성
• React에서만 쓰이는 새로운 Attribute가 있다.
  • key
    • react가 어떤 항목을 변경, 추가, 삭제하는 작업을 도움
    • 엘리먼트가 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정
    • 배열 안, 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없음.
    • 두 개의 다른 배열을 만들 때, 동일한 key 사용 가능
  • dangerouslySetInnerHTML(문자를 html으로 변경할 때 사용, 사용 잘 안 함)

 

state vs prop 정리

	state	prop
특징	일반 자바스크립트 객체
	컴포넌트 내부 선언, 내부에서 값 변경 (저장)	부모 컴포넌트에서 자식 컴포넌트에 데이터 전달
	앱의 유동적 데이터 다루는 객체	한 번 설정되면 변경X
	이벤트 핸들러는 일반적으로 state 를 업데이트	상위 컴포넌트는 하위 컴포넌트에 대한 props 설정

 

클래스형 컴포넌트 state 코드

• 클래스형 이제 잘 안 쓴다.
• npm start 전에 App.js에서 클래스 import 했는지 까먹지 말기!

import React from "react";

class ClassComponent2 extends React.Component{
    // state 오브젝트
    state = {
        counter:0,
    }

    up = () =>{
        this.setState({counter : this.state.counter+2})
    }

    render (){
        //객체 구조 분해 할당
        const {counter}= this.state;

        return(
            <>
            <h5>{counter}</h5>
            <button onClick={this.up}>+2</button>
            </>
        )
    }
}


  export default ClassComponent2;

 

함수형 컴포넌트 useState()  코드

• 원래 없었다. react 16.8 버전 이후부터 useState 함수가 생겼고, 이를 통해 함수형 컴포넌트에서도 state를 사용하게 되었다. 
• useState 함수의 인자에는 상태의초기값
  • useState의 초기값은 숫자, 문자, 배열으로 값의 형태가 자유로움
  • 첫 번째 원소 : 현재 상태
  • 두 번째 원소 : 상태를 바꿔주는 setter 함수

import { useState } from 'react';

function FunctionComponent2() {
  const [counter, setCounter] = useState(10);

  const down = () => {
    setCounter(counter - 1);
  };
  return (
    <>
      <h5>{counter}</h5>
      <button onClick={down}>-1</button>
    </>
  );
}

export default FunctionComponent2;

 

https://lakelouise.tistory.com/260

[React] 리액트 State란?

 

https://onlyfor-me-blog.tistory.com/463

[React] State란?