[2024 React.js 스터디] 이서영 #4주차 리액트 입문

1. 리액트는 어쩌다가 만들어졌을까?

• DOM을 변형 : DOM Selector API를 사용, 특정 DOM선택 -> 특정 이벤트가 발생하면 변화를 주도록 설정
• 만약 인터랙션이 자주 발생하고 이에 따라 동적으로 UI를 표현해야된다면 관리하기가 힘들어짐
• DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움

-> Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐
- 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해줌 (업데이트 작업을 간소화 해줌)
 
-> 리액트의 개발
- 어떠한 상태가 바뀌었을 때, 업데이트를 어떻게 할 지 규칙을 정하는 것 X
- 그냥 다 날려버리고 처음부터 새로 만든다는 아이디어로부터 시작 -> 하지만 모든 걸 다시 새로 만들면 속도가 느림
-> 이때 리액트에서 Virtual DOM 이라는 것을 사용 
 
Virtual DOM : 브라우저에서 실제로 보여지는 DOM (X), 메모리에 가상으로 존재하는 DOM
- JavaScript 객체, 작동 성능 속도 빠름 
- 상태 업데이트
-> 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링
-> 비교 알고리즘을 통해 실제 브라우저에 보여지고 있는 DOM과 비교, 차이 있는 곳 감지
-> 실제 DOM에 패치
 
따라서, '업데이트를 어떻게 할 지' 와 빠른 성능을 지켜냄
 
2. 작업환경 준비 
- 프로그램 설치

• Node.js : Webpack 과 Babel 같은 도구들은 자바스크립트 런타임인 Node.js를 기반으로 만들어져있음 
• Yarn : 조금 개선된 버전의 npm ( npm : 프로젝트에서 사용되는 라이브러린 설치, 해당 라이브러리들의 버전 관리ㅏ 할 때도 사용 )
• 코드 에디터 : ex) Vs Code, Atom, WebStorm, Sublime
• Git bash 

- 새 프로젝트 만들기

1. 터미널을 연 후, 다음 명령어 실행

begin-react라는 디렉터리가 생기고 안에 리액트 프로젝트 생성

설치

$ cd begin-react
$ yarn start

 
- cd명령어를 통해 해당 디렉터리에 들어가고
- yarn start 명령어를 실행하고나면 브라우저에 http://localhost:3000/ 이 열리고 리액트 아이콘이 보임

- Vs Code에서 터미널 띄우기
VsCode로 해당 디렉터리 열기 -> 상단 메뉴의 View>Terminal 열기 -> vs code에서 ctrl + , 누르기 -> terminal 검색 후 Terminal > External > Widows Exec 부분에 Git Bash의 경로인 C:\Program Files\Git\bin\bash.exe 넣기
 
3. 나의 첫 번째 리액트 컴포넌트
- src 디렉토리에 Hello.js 파일 작성

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

import React from 'react';
// 리액트 불러와주기

- 리액트 컴포넌트 : 함수,클래스 형태로 작성 가능
 
-App.js

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

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

- index.js 열기

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ReactDOM.render : 브라우저에 있는 실제 DOM 내부에 리엑트 컴포넌트 렌더링을 의미
 
public/index.html 을 열어보면 

<div id="root"></div>

-> 리액트 컴포넌트가 렌더링 될 때, 렌더링된 결과물이 div 내부에 렌더링 됨
 
4. JSX 
- 리액트에서 생김새를 정의할 때, 사용하는 문법 (JavaScript)
- 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX -> JavaScript 로 변환

• Babel : 자바스크립트의 문법을 확장해주는 도구

- JSX가 JavaScript로 제대로 변환이 되기 위한 규칙

• 태그 꼭 닫기 (태그를 열었으면 <div></div> 꼭 닫기)
• html에서는 input, br 태그 사용 시 닫지 않기도 하지만 리액트는 안됨!
• 두 개 이상의 태그는 무조건 하나의 태그로 감싸기
• JSX 안에 자바스크립트 값 사용하기(JSX 내부에 자바스크립트 변수를 보여줘야 할 때 -> {}로 감싸서 보여주기)

- 주석

• JSX 내부의 주석 : {/* 이렇게~*/}
• 열리는 태그 내부에서는 //이렇게   주석 작성 가능 

 
5. props를 통해 컴포넌트에게 값 전달하기
- props

• properties의 줄임말
• 어떠한 값을 컴포넌트에게 전달해야할 때, props 사용

- props의 기본 사용법 
 App.js

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

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

 
Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

• 컴포넌트에게 전달되는 props : 파라미터를 통해 조회 가능
• props 는 객체 형태로 전달
• 만약 name 값을 조회하고 싶다면 props.name 을 조회

- 여러개의 props, 비구조화 할당

• props 내부 값을 조회 할 때마다 props. 입력 
• 함수의 파라미터에서 비구조화 할당 문법 사용시 코드 간결하게 작성 가능

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 
- defalutProps 로 기본값 설정

• 컴포넌트에 props를 지정 x 기본적으로 사용할 값 설정하고 싶다면 컴포넌트에 defaultProps 값 설정

- props.children

• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때 props.chlidren 조회

6. 조건부 렌더링

• 특정 조건에 따라 다른 결과물을 렌더링 하는 것
• ex) App 컴포넌트에서 Hello 컴포넌트 사용 시 isSpecial 이라는 props 설정해보기

App.js

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


function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>
      <Hello color="pink" />
    </Wrapper>
  )
}

export default App;

Hello.js

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

• isSpecial 값이 true라면 <b>*</b>, 아니라면 null

7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기
- 리액트 16.8에서 Hooks라는 기능 도입 -> 함수형 컴포넌트에서도 상태 관리 가능해짐
- useState 함수 사용 ( 리액트의 Hooks 중 하나 )
 
- 컴포넌트에서의 동적인 값 : 상태(state)
useState 함수를 통해 컴포넌트 상태 관리

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

• 함수형 업데이트는 주로 컴포넌트 최적화 할 때 사용

8. input 상태 관리하기
- 사용자가 입력할 수 있는 input 태그 상태 관리
src 디렉터리에 InputSample.js 라는 파일 생성
-> 컴포넌트를 App에서 렌더링
 
- input에 입력하는 값이 하단에 나타나게, 초기화 버튼을 누르면 input 값이 비워지도록 구현
 
onChange 이벤트 사용
이벤트 객체 e, 파라미터로 받아와서 사용, 이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킴
-> DOM의 value값 = e.target.value 를 조회하면 현재 input에 입력값이 무엇인지 알기 가능
-> 이 값을 useState를 통해 관리
 
- input 상태 관리 할 때는 input태그 value 값 설정해주어야함 ( 상태가 바뀌었을 떄 input의 내용 업데이트 됨 ) 
 
9. 여러개의 input 상태 관리하기
- useState를 여러 번 사용하고 onChange 도 여러 개 만들어서 구현 가능 (하지만 가장 좋은 방법 x)
- input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조, useState에서는 문자열이 아닌 객체 형태의 상태 관리
 
- 리액트 상태에서 객체를 수정해야할 때는 직접 수정 x
- 새로운 객체 생성 -> 새로운 객체에 변화 -> 이를 상태로 사용