React 공부하기(1) - 기본편

🌈 벨로퍼트와 함께하는 모던 리액트

 

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

 

Javascript는 어떤 상태가 바뀌면, 그 상태와 연결된(getElementById) DOM을 변경!

React는 어떤 상태가 바뀌면, 아예 전부 다 날려버리고 새로운 DOM을 보여줌!

=> 어떻게 업데이트 해야되지.. 고민할 필요 없어짐 개발이 쉬어졌다

=> 근데 느리지 않아?

=> virtual DOM을 사용해서 변경이 된 부분과 안 된 부분을 비교해서 변경된 것만 실제 DOM에 적용

=> 그래서 결론은 빠르다!

 

02. 작업환경 준비

 

Node.js : for Webpack, Babel

Yarn : npm(node.js package manager) 상위버전

코드 에디터 : VSC

Git bash

 

Webpack : 여러가지 파일(컴포넌트)을 한개로 결합

Babel : JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 필요

 

03. 나의 첫번째 리액트 컴포넌트

 

<Hello.js>

import React from 'react'; // 리액트 컴포넌트 불러온다

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

export default Hello; // Hello 컴포넌트 내보낸다

<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')); // Id가 root인 DOM 렌더링

<public/index.html>

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

 

04. JSX의 기본 규칙 알아보기

 

JSX : JS + XML(HTML)

=> Babel이 JSX를 Javascript로 변환시켜 줌

 

[JSX 안에 {자바스크립트 값} 사용하기]

<App.js>

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

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

[style과 className]

<App.js>

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

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

<App.css>

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

 

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

 

[비구조화 할당 + defaultProps로 기본값 설정]

<App.js>

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

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

export default App;

<Hello.js>

import React from 'react';

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

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

export default Hello;

[props.children]

<App.js>

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

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

export default App;

<Wrapper.js>

import React from 'react';

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

export default Wrapper;

 

06. 조건부 렌더링

<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}
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

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

export default Hello;

A(true) && B : B

A(false) && B : false