[React] Component와 Props 그리고 State

React는 Facebook에서 제공해주는 프론트앤드 라이브러리인데 Component를 기반으로 개발한다.

Component란?

여기 여러가지 블록이 있다. 우리는 이 블록을 이용해서 여러가지를 만들 수 있을 것이다. 집을 만들 수도 있고 나무를 만들 수도 있을 것이다. 하나의 블록이 집에도, 나무에도 사용될 수 있다.

Component는 React라는 건물을 이루는 부품이라고 생각하면 된다. 우리는 이 Component를 기능별로 나눌 수 있고, 어디든지 사용 할 수 있다.

Component는 유지보수, 관리, 재사용이 편한 장점이 있다.

const App = () => {
    return (
        <div>
            <p>안녕하세요</p>
        </div>
    )
}

안녕하세요라는 p태그를 출력하는 App Component이다. Component의 이름은 대문자로 시작해야한다. 우리는 이 App이라는 Component를 어디든지 사용 할 수 있다.

<div>
	<App />
</div>

마치 태그처럼 사용 할 수 있다.

Prop란?

function Button({text}){
    return <button>{text}</button>
}

<Button text={"click me"}></Button>
<Button text={"kick me"}></Button>

코드를 살펴보면 Button이라는 Component를 만들어주고 Attribute로 text를 주고 있는데 이 Attribute에 해당하는 부분을 Props라고 한다. Props를 통해 Component끼리 데이터를 주고받을 수 있다. click me와 kick me 버튼이 두 개 생기게 된다.

State란?

import {useState} from 'react'

function App() {
  const [counter, setCounter] = useState(0); //초기값 0
  const onClick = () => setCounter((cur) => cur + 1)
  //onClick이 실행 될 때마다 couter 1씩 증가
  function Button({text, onClick}){
    return <button
    onClick={onClick}
    >{text}</button>
    
  return (
    <h1>버튼을 {counter}회 눌렀습니다.</h1>
    <Button onClick={onClick} text={"click me"}></Button>
  )
}

State를 사용하기 위해서는 useState를 import 해줘야한다. State는 Component의 값을 동적으로 바꿔주기 위해 사용한다. 위 코드를 실행하면 click me 라는 버튼을 누를 때마다 counter의 값이 1씩 증가하면서 누른 횟수만큼 자동으로 출력된다.

그 이유는 State의 강력한 장점 때문인데, State의 값이 변경되면 React가 자동으로 변경된 부분을 재렌더링 해준다.

State를 변경하는 방법

const [counter, setCounter] = useState(0);
setCounter(counter + 1) //직접 넣기
setCounter((current) => { //함수로 넣기
  return current + 1
})

State를 변경하는 데는 두 가지 방법이 있는데 하나는 말을 하다 마는 것이고..

1. 변경할 값을 넣기
2. setState에 함수를 넣기

위 예시처럼 현재 값을 기반으로 State를 변경하고 싶을 경우에는 함수를 넣는 방법을 추천한다.