[React] 컴포넌트와 state

1. Component

• 컴포넌트(Component)란, 리액트의 기본 단위로, UI를 구성하는 개별적인 뷰 단위이다.
• 여러 컴포넌트를 조합하여 복잡한 화면을 만들 수 있다.

출처: https://kss7547.tistory.com/26

• 컴포넌트는 JavaScript의 함수 형태로 구현된다.
• 컴포넌트는 재사용이 가능하다.
• 컴포넌트 클래스의 이름은 첫 글자를 대문자로 작성한다. (컴포넌트 클래스: 컴포넌트를 찍어내는 공장)

 

2. State

• setState(): 컴포넌트의 state 객체에 대한 업데이트를 실행한다.
• state가 변경되면, 컴포넌트는 리렌더링된다.
• state는 동적인 데이터를 다루는 방식으로, Hooks중 하나인 useState를 통해 다룰 수 있다.
• state는 함수의 매개변수처럼 컴포넌트에 전달되는 props와 달리, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

import React, {useState} from "react";

function Counter() {
    const [counter, setCounter] = useState(0);
    
    <>
    
    <div className="counter">This is {counter}</div>
    <button onClick = {() => { setCounter(counter+1);}} >
    plus
    </button>
    
    </>
    return ();
  }
  
  export default Counter;

• const [counter, setCounter] = useState(0);
  • useState()를 호출하면 배열을 반환한다.
  • 첫 번째 원소는 현재 상태 값 변수이고, 두 번째 원소는 상태 값을 갱신해주는 Setter 함수이다.
  • useState 괄호 안의 값은 상태의 초기 값이다.
  • const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);
•  onClick = {() => { setCounter(counter+1);}}
  • setCounter(): 상태 값 갱신 함수이다.
  • setCounter 파라미터에는 업데이트 할 새로운 값을 넣어준다.
  • setCounter(preNum => preNum + 1)과 같이 업데이트 하는 함수를 넣어 값을 업데이트 할 수도 있다.

 

 

 

 

 

 

[ 참고 ]

https://xiubindev.tistory.com/97