React Basic -1

Inseok Park·2022년 7월 26일

React

react-fastcampus

목록 보기

1/1

React Basic

React 의 개념과 특징

Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크)
페이스북, 인스타그램, 넷플릭스 모두 이 React 로 만들어졌다.

React 의 작동원리 (SPA)

Single Page Application

하나의 html 파일만 보여주고, 내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 것
페이지가 변경될 때마다 무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적

Virtual Dom with Diff Algorithm

DOM 은 html 문서를 통해서 생성된, 자바스크립트를 통해서 조작 가능한 요소들을 뜻함.
React 는 가상으로 html 요소들을 생성하고 (가상 DOM), 현재 화면에 표시되는 html 요소들 (실제 DOM) 과 비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행한다.
요소가 달라질 때마다 새롭게 화면을 다시 그리는 것이 아니라, 달라진 부분만 알아서 React 가 다시 그려준다.

component

React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행한다.
그래서 앞으로 component 라는 걸 사용할 건데, component 는 무엇일까?
하나의 html 페이지에서 요소들을 잘게 나눈 것이라고 생각하면 된다.
react 의 component 는 함수형으로 작성하는 방식과, 클래스형으로 작성하는 방식이 있다.

함수형 예시

import React from 'react';

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

export default Hello;

클래스형 예시

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, number } = this.props;
    return (
      <div style={{ color }}>
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

최근에는 함수형을 쓰는 것이 트렌드이고, 코드 자체도 클래스형을 쓸 때보다 훨씬 짧아진다.

JSX (Javascript XML)

JSX 는 react 에서 쓰이는 자바스크립트 확장 문법으로,
쉽게 말하면 html 을 자바스크립트 기반으로 작성할 수 있도록 하는 문법이다.
지금까지는 자바스크립트 코드는 js 파일이나 <script> 태그 안에 쓰고,
html 코드는 html 파일 안에 써왔지만,
이제부터는 js 파일 안에 자바스크립트와 html 코드를 모두 쓰게 된다.

아래는 Timer 라는 이름의 컴포넌트를 만들기 위한 React 함수형 Component의 기본 틀이다.

import React from 'react'

function Timer() {
  return (
    <div>Timer</div>
  )
}

export default Timer

여기서 이 return 안 부분이 바로 jsx이다.

return (
  <div>Timer</div>
)

jsx 를 쓸 때 주의사항

1. 반드시 전체를 감싸는 부모 태그가 하나 있어야 한다. (빈 태그로 감싸도 됨)

return (
  <>Timer</>
)

아래처럼 태그 전체를 감싸는 부모 태그가 없다면 에러가 발생합니다.

return (
  <div>Timer</div>
  <div>Timer</div>
)

2. jsx 내부에서, 외부 자바스크립트 부분에서 선언한 변수나 함수를 쓸 때는 {} 기호를 쓴다.

function Timer() {
	const name = "park"

  return (
    <div>{name} Timer</div>
  )
}

3. jsx 내부에서, html 태그 요소에 class 를 주고 싶을 때는, className 을 쓴다.

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

4. 주석은 {/* 주석내용 */} 형태로 사용할 수 있다.

return (
  {/* 주석내용 */}
  <>Timer</>
)

5. camelCase
앞으로 React 에서 자바스크립트를 사용하면서, 변수나 함수를 만들때는
첫번째 단어는 소문자, 두번째 단어부터는 대문자가 되도록 이름을 짓는다.
ex) hello_world → helloWorld
ex) count_down → countDown

주의) 그래도 react component 명은 무조건 대문자로 시작해야한다.

React 시작해보기

windows 의 경우 직접 인스톨러를 받아서 설치해야 한다.
yarn pkg
npm install --global yarn
yarn --version
yarn create react-app 프로젝트이름
yarn start
터미널에 위 명령어 입력과정을 거치면 localhost:3000 에서 리액트 프로젝트가 실행된다.

React 의 변수와 상태 (props, state)

src 폴더안에 components 폴더를 만들고 js 파일을 만든다.

vscode 마켓플레이스에서 ES7+ React/Redux/React-Native snippet을 설치 후
First.js 파일에서 rfce를 입력하면 react 함수형 컴포넌트의 가장 기본적인 형태가 입력된다.
First.js

import React from 'react'

function First() {
  return (
    <div>First</div>
  )
}

export default First

해당 컴포넌트를 우리가 보려면 ?
App.js에서 First를 import 후 JSX문법란인 return() 내부에 <First />를 입력한다.

import First from './components/First';

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

export default App;

props 활용해보기 (비구조할당)

props 는 properties 의 줄임말로,
상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용됩니다.

App.js 와 First.js 중에서 상위 컴포넌트는 무엇일까?
First.js 컴포넌트를 불러와서 쓰고 있는, App.js 가 상위 컴포넌트이다.

그러므로 현재 상위컴포넌트는 App.js, 하위컴포넌트는 First.js 이다.

컴포넌트 태그 안에 변수명 = 값 형태로 적으면, 해당 변수를 그대로 해당 컴포넌트 내부에서 쓸 수 있다.

문자의 경우 변수명 = 문자열 ex) name="park" 로 쓸 수 있고,
숫자의 경우 변수명 = {숫자} ex) number={5} 로 쓸 수 있다.

app.js

import First from './components/Timer';

function App() {
  return (
    <div>
      <First name="Park" number={5}/>
    </div>
  );
}

export default App;

상위 컴포넌트에서 작성한 변수는 아래처럼 2가지 방식으로 사용할 수 있습니다.

First.js

import React from 'react'

function First({name, number}) {
  return (
    <div>이름은 {name}, 숫자는 {number}</div>
  )
}

export default First

import React from 'react'

function First(props) {
  return (
    <div>{props.name} First</div>
  )
}

export default First

component 를 쓰는 것이 좋은 이유는, 재사용이 가능하다는 점이다.
틀은 유지한 채로, 값만 원하는대로 바꿔서 여러개를 만들어 놓을 수 있다.

import First from './components/First';

function App() {
  return (
    <div>
      <First name="Park" number={5}/>
      <First name="Kim" number={2}/>
      <First name="Lee" number={7}/>
    </div>
  );
}

export default App;

props 를 받아올 때는, 비구조할당 을 쓰는 것이 가장 좋다.
비구조할당 이란 아래와 같이 변수를 분해하면서 받아오는 것을 말한다.

const data = {'name': 'Park', 'number': 1}

const {name, number} = data

import React from 'react'

function First(props) {
	const {name, number} = props

  return (
    <div>이름은 {name}, 숫자는 {number}</div>
  )
}

export default First

useState 사용해보기 (반응성)

값이 변경될 때마다 해당 부분을 다시 표시해주도록 하려면 어떻게 해야할까?
useState 라는 것을 사용해주면 된다. (use~ 을 react 에서는 hook 이라고 부른다)

useState 의 기본적인 형태는 아래와 같다.
그냥 변수를 선언하는 거라고 생각하면 된다.
1씩 더해지는 함수는 아래처럼 작성할 수 있다.

import React, { useState } from 'react' //useState 입력

function First() {
  const [test, setTest] = useState(0); // const [변수명, set변수명] = useState(변수의 초기값);
  const countUp = () => {
    setTest(test+1);
  };
  const countDown = () => {
    setTest(test - 1);
  };
  return (
    <div>
      {test}
      <button onClick={countUp}>카운트업!</button>
      <button onClick={countDown}>카운트다운!</button>
    </div>
  )
}

export default First

Inseok Park