[태그:] React.js

2. state

컴포넌트 안에서 사용되는 이벤트에 의해 변경이 일어나는 동적인 값.

값을 변경할 수 있으며 반드시 setState를 사용하여 변경한다.

※ state 사용할 때 주의사항

❗state에 저장되는 객체는 반드시 초기화(생성자에서 초기화)

❗state 값을 임의로 직접 변경하지 말 것, 반드시 state 값 변경시 setState() 사용.

직접 변경하면 render 함수가 호출되지 않아 리렌더링 발생 X

1) 사용법

(1) 기본 사용: useState

① import useState

import { useState } from 'react';

② declare useState()

• useState 기본형태

const [state, setState] = useState(initialState);

• state: 현재 상태
• setState: 상태를 변경하는 setState 함수 리턴
• initialState: 상태 초기값. 생략 가능

(2) state 값 변경: setState()

setState() 함수를 호출하여 state 값을 변경하면 자동으로 render 함수를 호출

다음과 같은 예시를 통해 useState와 setState 사용:

• App.js: Increase를 클릭할때마다 1씩 증가

import React, { useState } from 'react';

const App = () => {
    const [num, setNumber] = useState(0);//초기값 0const onIncrease = () => {
        setNumber(num + 1);
    }
    return(
        <div>
            <h1>{num}</h1>
            <button onClick={onIncrease}>Increase</button>
        </div>
    );
}

export default App;

🌟setState() 함수는 비동기 처리, 즉 작업 순서대로가 아닌 이벤트에 따라 처리.

어떤 작업에서 시간이 오래 소요되면 해당 작업이 완료될때까지 기다려주지 않고 다음 작업을 실행…

즉 작업의 실행 순서를 보장하지 않는다.

🌟 setState() 함수의 인자로 함수를 전달하면 이전 state 값을 쉽게 가져올 수 있음

state를 변경한 후 변경된 state를 사용해야 할 경우(state의 업데이트가 이전의 값에 의존):

• Counter.js: Increase, Decrease

import React, { useState } from 'react';

function Counter() {
    const [number, setNumber] = useState(0);

    const onIncrease = () => {
        setNumber(preNumber => preNumber + 1);
    }

    const onDecrease = () => {
        setNumber(preNumber => preNumber - 1);
    }

    return(
        <div>
            <h2>{number}</h2>
            <button onClick={onIncrease}>Increase</button>
            <button onClick={onDecrease}>Decrease</button>
        </div>
    );
}

export default Counter;

(3) state 값 변경: forceUpdate()

forceUpdate() 함수를 사용하면 화면을 강제로 새로 고침하여 render() 함수 호출

인스턴스 변수와 화면이 변경되어 출력됨.

• ForceUpdate.js

import React, { Component } from 'react';

class ForceUpdate extends Components {
    constructor(props) {
        super(props);
        this.state = {
            stateString: 'react',
        }
    }
    StateChange = () => {
        this.state.stateString = 'React';
        this.forceUpdate();
    }

    render() {
        return(
            <div>
                <button onClick={this.stateChange}>forceUpdate</button>
                {this.state.stateString}                // react에서 React로 변경
            </div>
        );
    }
}

export default ForceUpdate;

※ forceUpdate()를 사용하는 것은 리액트 성능에 제약이 있으므로

매번 화면을 새로 출력해야 하는 경우가 아니면 가급적 사용하지 않도록 함

1) 리액트의 특징

(1) 컴포넌트(Component)

재사용이 가능한 각각의 작고 독립적인 모듈. 마치 레고 블럭…

이미 만들어진 컴포넌트들을 조합하여 화면을 효율적으로 구성하는 것이 리액트의 특징.

🌟 컴포넌트의 구성요소

• 프로퍼티(Props)
• state
• 컨텍스트(Context)

(2) 가상돔(Virtual DOM)

✍🏻 브라우저에서 화면을 렌더링하는 과정

서버로부터 받는 파일을 파싱하여 DOM Tree와 CSSOM Tree를 만들고 결합 : 렌더트리(Render Tree) 생성.

생성한 Render Tree로  Layout을 계산하고 만든 후, 이 요소들을 실제로 화면을 그리는 Paint를 한다.

DOM + CSSOM → Render Tree

• DOM(Document Object Model) Tree

HTML 파일을  파싱하여 구조화하여 표현한 것.

• CSSOM(CSS Object Model) Tree

CSS 파일을 DOM처럼 파싱하고 구조화하여 만든 것.

DOM은 아주 작은 변경사항이 있더라도 항상 리렌더링을 하고 이때 문제점 발생

= 화면이 커지면 커질수록 화면을 그리는 시간이 길어지는, 즉 속도가 느려지는 것.

따라서 가상돔(Virtual DOM)을 사용.

🌟 리액트가 가상돔(Virtual DOM)을 반영하는 절차

① 변경사항 발생 → 전체 UI를 Virtual DOM에 리렌더링.

② 이전 Virtual DOM과 현재를 비교 : 가상돔끼리 비교

③ 변경된 부분만 실제 DOM에 업데이트

즉, 간단히 요약하자면:

기존 : 화면의 일부가 수정되면 화면 전체를 업데이트.

가상 DOM 도입 : 이전 UI에서 변경된 부분만 반영하여 업데이트

1. 프로퍼티(properties, props)

상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용(단방향 데이터 흐름).

프로퍼티 값은 수정 불가능, 즉 읽기 전용 데이터.

1) 사용법

상위 컴포넌트에서 Props를 지정하고 하위 컴포넌트에서 받은 Props 값을 렌더링.

• 문자열 전달: 큰 따옴표(” “) 사용
• 숫자형, boolean 등의 값(문자열 외의 값) 전달: 중괄호( { } ) 사용

(1) 단일값 전달

• App.js

import React from 'react';
import Hello from "../src/Hello";

function App() {
    return (
            <Hello name="React"></Hello>//사용할 컴포넌트 props의 name 값을 "React"로
        );
}

export default App;

• Header.js

import React from 'react';

function Hello(props) {
    return <div>Hello, {props.name}</div>;// name 값을 조회하기 위해 props.name 이용.
}

export default Hello;

(2) 여러값 전달

• App.js

import React from 'react';
import Hello from '../src/Hello';

function App() {
    return (
            <Hello name="React" color="blue"/>
        );
}

export default App;

• Hello.js

import React from 'react';

function Hello(props){
    return(
            <div style={{ color: props.color }}>Hello, {props.name}</div>
        );
}

export default Hello;

이런 경우 객체값을 부를 때마다 매번 props에서 불러와야 함.

비구조화 할당 방식으로 코드를 바꾸면:

import React from 'react';

function Hello({name, color}){
    return(
            <div style={{ color: color }}>Hello, {name}</div>//동일하게 <div style={{ color }}Hello, {name}</div>
        );
}

export default Hello;

(3) 기본값 설정: defaultProps

• Hello.js

import React from 'react';

function Hello( {color, name} ) {
    return <div style={{ color }}>Hello, {name}</div>;
}

Hello.defaultProps = {
    name: 'noname'//defaultProps로 기본값 설정.
}

export default Hello;

(4) 컴포넌트 태그 내부의 값 조회: props.children

예를 들어, 스타일 정의된 파일 Wrapper.js를 App.js의 컴퍼넌트로 추가한다면,

• Wrapper.js

import React from "react";

function Wrapper() {
    const style = {
        border: '2px solid black',
        padding: 20
    };
    return <div style={style}><div>
}

export default Wrapper;

• App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
    return (
        <Wrapper>
            <Hello name="React" color="blue"></Header>
        </Wraaper>
    );
}

export default App;

하지만 이렇게 작성된 Wrapper 컴포넌트를 App.js에 추가하면 Wrapper 태그 내부에서 작성한 값들을 출력 X

이럴 때, {children}을 사용하여 태그 내부를 보이도록 만들어주도록 한다.

따라서 Wrapper.js를 다음과 같이 수정한다:

• Wrapper.js

import React from 'react';

function Wrapper({ children }) {
    const style = {
        border: '2px solid black',
        padding: 20
    };

    return (
        <div style={style}>
            {children}
        </div>
    )
}

export default Wrapper;

1. CRA(create-react-app)

React 개발 환경을 쉽게 구축해주는 도구.

💻 CRA를 통해 자동으로 구축되는 요소:

• webpack: 모듈 번들러
• babel: JSX를 JavaScript로 컴파일
• jest: 기능 테스트
• eslint: 코드 교정 및 스타일 맞추기(형상관리)
• polyfill: 구형 브라우저에서 지원하지 않는 문법(기능) 지원
• HMR(Hot Module Replacement): reload 없이 변경사항 반영
• CSS 후처리: sass 사용시 CSS 컴파일, 구형 브라우저에는 Vendor 접두사(perfix) 필요

※ 단점: webpack, babel, eslint 등 설정 변경하기 어려움.(설정을 변경할 경우 eject)

2. CRA 사용

npx create-react-app 프로젝트폴더명

🌟 CRA는 서버사이드 렌더링(SSR)을 지원하지 않는다

CRA에 eject하여 webpack과 babel을 설정하면 서버사이드 렌더링을 구현할 수는 있으나 효율적이지는 않으므로

서버사이드 렌더링이 필요하면 SSR을 기본적으로 제공하는 Next.js를 사용하는 것을 권장.

3. CRA scripts

🌟package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

1) start

• React 개발 서버 구동.
• 기본 http로 실행

✍🏻 https 실행 원하는 경우

• CMD

set HTTPS=true && npm start

• Power Shell

($env:HTTPS = "true") -and (npm start)

• Linux, MacOS

HTTPS=true npm start

2) build

• 실제 서버 배포시 사용.
• 빌드시 정적파일 생성(/build 파일)
• 서버에 별도의 애플리케이션 실행 없음

3) test

• 테스트 실행
• 기본으로 존재하는 App.test.hs 파일 테스트 실행.
• 파일이름.test.js, 파일이름.spec.js 형식 테스트 파일이면 인식 가능하여 테스트실행됨.

4) eject

• react-scripts를 사용하지 않고 모든 설정파일 추출
• CRA를 기본으로 직접 개발 환경 설정 및 구축하고 싶을 경우 사용
• 한 번 실행하면 되돌릴 수 없음

4. 환경변수

1) NODE_ENV 환경변수

CRA에서 기본적으로 가지고 있는 환경변수, 실행 명령어에 따라 자동으로 NODE_ENV 값이 정해짐.

process.env.NODE_ENV

(1) 개발 환경: development

npm start로 실행할 경우

(2) 테스트 환경: test

npm test로 실행할 경우

(3) 배포 환경: production

npm run build로 실행할 경우

2) 새로운 환경변수 설정

React 환경 변수명은 생성시 REACTAPP 으로 시작.

1. 컴포넌트(Component)

재사용이 가능한 각각의 작고 독립적인 모듈.

리액트로 개발한 앱을 이루는 가장 작은 단위, 조각.

레고블럭으로 비유할 때, 레고블럭으로 만든 집은 리액트 앱으로 보고

집을 구성하는 하나의 작은 블록들은 컴포넌트라고 할 수 있음.

1) 왜 컴포넌트인가

기존 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 분리하여 관리.

따라서 각 요소들이 독립적이지 않고 의존성이 높아서 재사용이 어려움.

→ 컴포넌트는 View를 독립적으로 구성하여 재사용 가능!

2) 컴포넌트 사용

컴포넌트의 이름은 항상 대문자로 시작.

※ React에서 소문자로 시작하는 컴포넌트는 DOM 태그로 인식함.

🌟 컴포넌트의 구성요소

• 프로퍼티(Props)
• state
• 컨텍스트(Context)

2. 컴포넌트의 선언방식

1) 함수형 컴포넌트(Functional Component)

• state와 LifeCycle API 사용이 불가능했으나 Hook 기능으로 사용 가능 .
• 클래스형 컴포넌트보다 선언하기 편함.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용함

(1) 함수형 컴포넌트 선언

import React from 'react';

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

export default App;

2) 클래스형 컴포넌트(Class Component)

• state와 LifeCycle API 사용 가능.
• 임의 메서드 정의 가능.

(1) 클래스형 컴포넌트 선언

• class 키워드 필요
• Component를 상속 받아야 함.
• render() 메소드 반드시 필요.

import React, { Component } from 'react';

class App extends Component {
    render() {
            return(
            <div></div>
            );
    }
}

export default App;

※ 클래스 컴포넌트로 개발을 진행한 프로젝트의 유지보수를 위해 알아둘 것

React의 세계에 오신 것을 환영합니다! 이 가이드는 React를 처음 시작하는 분들을 위해 만들어졌습니다. 가장 기본적인 개념부터 차근차근 알아보고, 직접 코드를 작성하며 React와 친해져 봅시다.

목차

1. React, 왜 배워야 할까요?

   • React란?
   • React의 핵심 장점

2. 첫 React 프로젝트 시작하기

   • 개발 환경 준비
   • create-react-app으로 프로젝트 생성

3. React의 핵심 문법 3가지

   • JSX: JavaScript와 HTML을 한번에
   • 컴포넌트: 재사용 가능한 UI 조각
   • Props와 State: 데이터를 다루는 방법
4. 
   

   간단한 예제: 나만의 카운터 만들기

   
   

1. React, 왜 배워야 할까요?

1.1. React란?

React는 페이스북에서 개발한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 웹사이트의 ‘보이는 부분’을 쉽고 효율적으로 만들 수 있도록 도와주는 도구라고 생각하면 됩니다.

1.2. React의 핵심 장점

• 컴포넌트 기반: 레고 블록처럼 UI를 여러 개의 독립적인 ‘컴포넌트’로 나누어 만듭니다. 덕분에 코드를 재사용하기 쉽고, 유지보수가 편리해집니다.
• 빠른 속도: 가상돔(Virtual DOM)을 사용하여 변경된 부분만 실제 화면에 업데이트하므로, 불필요한 작업을 줄여 빠른 성능을 보여줍니다.
• 선언형 코드: “이렇게 저렇게 해서 이걸 만들어줘”가 아니라, “이러한 상태일 때, 화면은 이 모습이어야 해”라고 선언적으로 코드를 작성합니다. 코드가 훨씬 직관적이고 예측 가능해집니다.

2. 첫 React 프로젝트 시작하기

2.1. 개발 환경 준비

React 개발을 위해서는 컴퓨터에 Node.js와 npm(또는 yarn)이 설치되어 있어야 합니다. Node.js를 설치하면 npm은 자동으로 함께 설치됩니다.

2.2. create-react-app으로 프로젝트 생성

가장 쉬운 방법은 React 팀에서 공식적으로 제공하는 create-react-app 도구를 사용하는 것입니다. 터미널(명령 프롬프트 또는 PowerShell)을 열고 다음 명령어를 순서대로 입력하세요.

# 1. 'my-first-react-app'이라는 이름의 React 프로젝트를 생성합니다.
npx create-react-app my-first-react-app

# 2. 생성된 프로젝트 폴더로 이동합니다.
cd my-first-react-app

# 3. 개발 서버를 실행합니다.
npm start

npm start 명령어를 실행하면, 잠시 후 브라우저에 React 로고가 빙글빙글 돌아가는 시작 페이지가 나타날 것입니다. 첫 React 프로젝트가 성공적으로 실행된 것입니다!

3. React의 핵심 문법 3가지

3.1. JSX: JavaScript와 HTML을 한번에

JSX는 JavaScript 파일 안에서 HTML과 유사한 코드를 작성할 수 있게 해주는 문법입니다.

// 일반 JavaScript 변수
const name = "React";

// 변수를 포함한 JSX 코드
const element = <h1>Hello, {name}!</h1>; // 결과: <h1>Hello, React!</h1>

주의할 점:

• HTML의 class 속성은 JSX에서 className으로 써야 합니다. (class는 JavaScript의 예약어이기 때문입니다.)
• 모든 태그는 반드시 닫혀있어야 합니다. (예: <br> -> <br />)

3.2. 컴포넌트: 재사용 가능한 UI 조각

컴포넌트는 React의 심장입니다. UI를 독립적인 단위로 쪼개어 관리할 수 있게 해줍니다. 현재는 주로 함수형 컴포넌트를 사용합니다.

// 'Welcome'이라는 이름의 간단한 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 컴포넌트 사용하기
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

3.3. Props와 State: 데이터를 다루는 방법

• 
  

  Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터입니다. 위 예제의 name="Sara"가 바로 props입니다. Props는 자식 컴포넌트 안에서 절대 직접 수정할 수 없습니다.

  
  
• 
  

  State (상태): 컴포넌트가 자체적으로 가지는 내부 데이터입니다. 사용자의 입력이나 시간의 흐름에 따라 변할 수 있습니다. State가 변경되면, React는 컴포넌트를 화면에 다시 그려줍니다(리렌더링). State는 useState라는 Hook을 사용해 만듭니다.

  
  

4. 간단한 예제: 나만의 카운터 만들기

지금까지 배운 개념을 모두 활용하여 간단한 카운터 컴포넌트를 만들어 보겠습니다. src/App.js 파일의 내용을 아래 코드로 바꿔보세요.

import React, { useState } from 'react'; // useState를 import 합니다.
import './App.css';

function App() {
  // 'count'라는 이름의 state를 만들고, 초기값을 0으로 설정합니다.
  // setCount는 count 값을 변경할 때 사용할 함수입니다.
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        {/* state인 count 값을 화면에 보여줍니다. */}
        <p>You clicked {count} times</p>

        {/* 버튼을 클릭하면 setCount 함수를 호출하여 count 값을 1 증가시킵니다. */}
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

코드를 저장하면 브라우저 화면이 자동으로 새로고침되고, ‘Click me’ 버튼이 있는 카운터가 나타날 것입니다. 버튼을 누를 때마다 숫자가 올라가는 것을 확인해보세요. 이것이 바로 State가 변경될 때 React가 화면을 업데이트하는 방식입니다.

이제 여러분은 React의 가장 중요한 첫걸음을 내디뎠습니다. 이 기본기를 바탕으로 더 복잡하고 멋진 웹 애플리케이션을 만들어 나갈 수 있을 것입니다.