React.js - Component, props,state

유재훈·2023년 4월 26일

React_Study

목록 보기

2/6

Component

Component의 사전적 정의는 독립적이고 재사용 가능한 코드 비트이다. Javascript 함수와 동일한 목적을 제공하지만 분리되어 작동하고 HTML을 반환한다.

코드를 보면 다음과 같다.

 <div className="box">
     Box1
 	<p>I am Box</p>
 </div>
      
 <div className="box">
      Box1
      <p>I am Box</p>
 </div>

기존에 같은 div를 만들려면 위 코드와 같이 하나하나 만들어 줘야했다. 하지만 react에선 코드하나로 재사용이 가능하다.

1. src > component > Box.js파일을 생성 한다.
2. raface단축키를 사용하여 component를 만든다.

만약 단축키가 안나올 경우 아래를 설치해야한다.

반복될 코드를 작성해준다.

import React from 'react'

const Box = () => {
    return (
      <div className="box">
          Box1
          <p>i am Box</p>
      </div>
  )
}

export default Box

App.js에 import Box from "./component/Box",<Box/> 선언해준다.

import './App.css';
import Box from "./component/Box"

function App() {
  return (
    <div>
      <Box/>
      <Box/>
      <Box/>
    </div> //jsx 신택스에서 주의할점. 반드시 하나로 묶어야한다.
  );
}

export default App;

결과는 i am Box div가 3개 생성이 되어 있다.

props

박스 안에 있는 내용을 바꾸고 싶다면 어떻게 해야할까?
1. App.js에 name값과 num값을 추가한다.

<div>
      <Box name="i am Box1" num={1} />
      <Box name="i am Box2" num={2} />
      <Box name="i am Box3" num={3} />
 </div>

Box.js에서 props변수로 받아온다.

props는 Object type 객체이다.

import React from 'react'

const Box = (props) => {
  return (
    <div className="box">
          Box{props.num}
          <p>{props.name}</p>
    </div>
  )
}

export default Box

결과는 다음과 같다.

State

react state?

React 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 React에서 사용하는 일반 Javascript 객체이다. state는 함수에 선언된 변수와 마찬가지로 구성 요소에서 관리되지만 차이점은 "정상"변수는 함수가 종료될 때 "사라지는" 반면,state는 React에 의해 보존된다.

state를 const로 선언하는 이유

const로 선언을 하게되면 변수의 값을 바꿀 수 없다는 사실을 알것이다. 근데 왜 state 값은 계속 바뀌는데 왜 let이 아닌 const로 선언하는가.

state는 일반 변수와 달리 setState 함수를 이용하여 값을 변경한다.(이렇게 함수 내부의 변수가 함수 수명이 끝나더라도, 변수의 참조가 계속 된다면 그 변수의 수명은 계속 된다.)

그러나 let을 사용하게 되면 conuter=100과 같은 변수형식이 할당이 가능해진다.
따라서 이를 방지하고 setState를 사용한 변수 변경만 허락하기 위해 const로 선언한다.

setState()

이벤트 핸들러, 서버 응답 또는 소품 변경에 대한 응답으로 상태를 업데이트할 수 있다. 이것은 setState() 메서드를 사용하여 수행된다.setState() 메서드는 구성 요소 상태에 대한 모든 업데이트를 대기열에 넣고 React에 업데이트된 상태로 구성 요소와 그 자식을 다시 렌더링 하도록 지시한다.

항상 setState() 메서드를 사용하여 상태 객체를 변경한다. 구성 요소가 업데이트 되었음을 알리고 render() 메서드를 호출하기 때문이다.

예시 코드

import { useState } from 'react';
import './App.css';
import Box from "./component/Box"

function App() {
  let counter = 0;
  const [counter2, setCounter2] = useState(0);
  const increase = () => {
    counter = counter + 1;
    setCounter2(counter2 + 1);
  }

  return (
    <div>
      <div>{counter}</div>
      <div>state:{ counter2}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}

export default App;

위 코드는 쉽게 설명하면 다음과 같다. const [적용, 변경할 내용]이다. 위 코드 내용을 리뷰하면 const [counter2, setCounter2] = useState(0); 처음에 counter2에 state값은 0으로 지정한다. let counter2 = 0과 같다.

<button onClick={increase}>클릭!</button>을 클릭하면 const increase =()=>{ setCounter2(counter2+1); }; 함수가 실행되고, <div>state:{ counter2}</div> counter2가 바뀌는데 counter2가 바뀌면서 state를 사용했기 때문에 자동으로 HTML에 랜더링이 돼 UI가 변경되는 것이다.

위 코드는 일반 javascript와 useState를 같이 사용한 코드이다.
위 코드 실행을 console.log에 찍어보면 counter는 항상 1이고 counter2는 계속 증가한다.
이유는 실행순서때문이다.

1. 유저가 버튼을 클릭한다.
2. counter+1헤서 1이됨
3. setState함수호출
4. console.log 실행됨
 - 변수값은 1로 보이고 state값은 아직 안변했기 때문에 그전에 값이 보인다.
5. 함수 끝
6. app 다시 re render
 - let counter=0을 거치면서 counter 값은 다시 0으로 초기화가 된다.
 - state값은 update가 되면서 다시 render 된다.
 
결국 변수는 render될때마다 초기화가 되고 state는 비동기처리가 된다.

유재훈

이전 포스트

React.js - Node.js설치(Mac os)

다음 포스트