FrontEnd/React

[ React ] JSX Component & Props & State

ChatjihoiPT 2025. 4. 2. 21:30

💡 개발할 때 자주 쓰는 명령어 비교

- 명령어 설명

npm install 또는 npm i 패키지(라이브러리) 설치
npm start 개발 서버 실행 (브라우저에서 보기)
npm run build 배포용 코드로 압축/최적화
npm test 테스트 코드 실행

✅ 함수형 → 클래스형으로 바꾸기(공부용/과거 코드 호환용)

🧠 핵심 변화 요약

- 함수형 클래스형

함수형 클래스형

useState this.state + this.setState
화살표 함수(RSC) 클래스 메서드로 작성 (RCC)
return (...) render() { return (...) } 안에서 작성
  • useState는 HOOK이라 ctrl +space+ ENTER해서 import해줘야 함
  • 단방향 vs 양반향 처리 bonding → ← obChange
  • ReactDeveloperTool 설치 화면 오른쪽 상단에 퍼즐 모양 > 누르면 나중에 크롬 화면에서 F12눌렀을 때 Component볼 수 있음.

3단원. Component

화면의 한 부분을 구성하며 자바스크립트로 로직을 형성하고, JSX로 뷰를 표현함

3-1. component

- 기능 단위, 재사용 단위의 객체
- react ui component를 만드는 방법
- 크게 함수형 Component와 Class형 Component로 나뉨

1. 함수형

- 선언하기 쉬우며 메모리 자원을 덜 이용함

- but, state와 라이프 스타일의 Api 사용 불가했으나
HOOK의 도입으로 해결

function 함수명(){
return jsx; }

import React from 'react';
import './MyComponent.css';

function MyComponent() {
  const name = '나의 컴포넌트';
  return <div className="react">{name}</div>;
}

export default MyComponent;

혹은 () => {} 화살표 함수 사용하기 
import React from 'react';
import './MyComponent.css';

const MyComponent = () => {
  return <div>컴포넌트</div>;
};

export default MyComponent;

2. class형

- class형 함수에는 꼭 render 함수가 있어야 함

- render(){ //필수 함수
return jsx;

import {Component} from 'react'
Class 컴포넌트이름 extends Component{

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}

export default App;

3-2. Props (ex. App: 부모, Welcome: 자식)

3-1의 컴포넌트 속성을 설정할 떄 사용하는 요소

element에 작성된 attribute값이나 content는 props를 통해 자식 Component에 전달됨

- 함수형 : arguement로 전달된 props 사용
- class형 : 상속받은 React.Component의 this.porps 사용
- *props : readOnly

import React from 'react';

const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

 MyComponent.defaultProps = {
  name: '기본 이름'  //props 값을 지정하지 않았을 때 보일 default이름 설정하기 
};

export default MyComponent;

1. children

- 컴포넌트 태그 사이의 내용을 보여주는 props

기본]

import React from 'react';

const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}
      입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

2. 비구조화 할당(destructuring assignment)

- 함수의 파라미터가 객체라면 객체에서 값을 추출

혹은 미리 props 값 선언하기
import React from 'react';

const MyComponent = props => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

3-1. PropTypes

- props의 타입을 지정(코드 상단에 import 구문을 사용하여 불러와야 함)

- name 값은 무조건 문자열(string)의 형태로 전달해야 됨

기본]

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="React">리액트</MyComponent>;
};

export default App;

isRequired]

propTypes를 지정하지 않았을때 경고 메시지를 띄워주는 작업

- 따라서 전달되지 않은 값이 있는지 확인해야 함

더 많은 propTypes]

더보기

• array: 배열

• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미합니다. 예를 들어 arrayOf(PropTypes.number)는 숫자로 이루어진 배열입니다.

• bool: true 혹은 false 값

• func: 함수

• number: 숫자

• object: 객체

• string: 문자열

• symbol: ES6의 Symbol

• node: 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX 코드. children도 node PropType입니다.)

• instanceOf(클래스): 특정 클래스의 인스턴스(예: instanceOf(MyClass))

• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나

• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나

• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체

• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체

3-2. 클래스 컴포너트에서 props 사용하기

기본]

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = {
  name: '기본 이름'
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

 

비구조화 할당]

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  static defaultProps = {
    name: '기본 이름'
  };
  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (...);
  }
}

export default MyComponent;

3-3. state

- 컴포넌트 내부에서 사용하는 상태 값으로 바뀔 수 있음

- 부모 컴포넌트에서만 변경가능
- 변경할 때는 Component가 제공하는 setState()함수를 통해서만 변경함
==> 객체를 state로 사용하는 경우 불변성을 유지해야 함
==> state로 사용하는 객체를 직접 변경하는 경우 객체는 같은 객체이므로 react는 변경된 내용을 감지하지 못해 re-rendering이 안될 수 있음. 따라서deep copy를 통해 새로운 객체를 만들어서 내용을 변경 후 setState()로 변경해야 re-rendering됨

 

1. useState (in 함수형 컴포넌트)

한 컴포넌트에서 여러 번 사용 가능
보통 spread연산자(...)를 이용해 객체에 대한 사본을 만들어 전달받은 세터 함수로 업데이트함

- 세터 함수

값을 설정(set)하는 함수

- 배열 비구조화 할당 사용

const array = [1, 2];
const one = array[0];
const two = array[1];
=> const array = [1, 2];
const [one, two] = array;

 

- HOOK

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

2. setState (in 클래스형 컴포넌트)

객체 전달]

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state의 초깃값 설정하기
    this.state = {
      number: 0
    };
  }
  render() {
    const { number } = this.state; // state를 조회할 때는 this.state로 조회합니다.
    return (
      <div>
        <h1>{number}</h1>
        <button
          // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
          onClick={() => {
            // this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;
App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

 

객체 대신 함수 인자 전달]

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
  onClick={() => {
    this.setState(prevState => {  //prevState는 기존 상태이고, props는 현재 지니고 있는 props
      return {
        number: prevState.number + 1
      };
    });
    // 위 코드와 아래 코드는 완전히 똑같은 기능을 합니다.
    // 아래 코드는 함수에서 바로 객체를 반환한다는 의미입니다.
    this.setState(prevState => ({
      number: prevState.number + 1
    }));
  }}
>
  +1
</button>

 

콜백 함수]

다른 함수에 인자로 전달되어 나중에 callback때 실행되는 함수

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
  onClick={() => {
    this.setState(
      {
        number: number + 1
      },
      () => {
        console.log('방금 setState가 호출되었습니다.');
        console.log(this.state);
      }
    );
  }}
>
  +1
</button>

'FrontEnd > React' 카테고리의 다른 글

[ React ] 컴포넌트 스타일링  (0) 2025.04.08
[ React ] Hook  (1) 2025.04.07
[ React ] Component Recycle Method  (0) 2025.04.06
[ React ] Element handling & Dom  (0) 2025.04.03
[ React ] JSX  (0) 2025.04.01

'FrontEnd/React'의 다른글

  • 현재글[ React ] JSX Component & Props & State

관련글

티스토리툴바