React 기본 시작

변승훈·2022년 7월 28일

React

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기

34/37

이번주 처음으로 React를 시작했다.
다른 프론트엔드 프레임워크인 Vue를 다뤄봐서 그런지 그나마 쉽게 개념들을 이해하고 내용들이 와 닿았다는 생각이 들었다.

1. React의 개념과 특징

1. React 란?

React는 Meta(전 Facebook)에서 만든 프론트엔드 라이브러리(프레임워크)이다.
오픈소스 프로젝트이며, 깃허브에서 모든 소스코드들을 확인할 수 있다.
현재 점유율 1등을 차지하고 있다.

2. React의 작동원리(SPA)

1. React는 Single Page Application이다.

하나의 html파일만 보여주고, 내부의 요소는 모두 javascript를 활용하여 변경시킨다.
페이지가 변경될 때 마다 무조건 새롭게 html, css파일을 표시하던 예전 방식보다 훨씬 더 효율적인 방법이다!

2. Virtual Dom with Diff Alogorithm

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

3. component

React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행한다. 이는 vue와 유사하다!

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;

최근에는 함수형을 쓰는 것이 트렌드이고, 코드 자체도 클래스형을 쓸 때보다 훨씬 짧아지므로 함수형을 사용하도록 하자!

4. JSX (Javascript XML)

JSX 는 react 에서 쓰이는 자바스크립트 확장 문법으로, 쉽게 말하면 html 을 자바스크립트 기반으로 작성할 수 있도록 하는 문법이다!

지금까지는 자바스크립트 코드는 js 파일이나

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

import React from 'react'

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

export default Timer

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

  return (
    <div>Timer</div>
  )

★ jsx 를 쓸 때는 몇 가지 주의사항이 있다.

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

  return (
    <>Timer</>
  )

태그 전체를 감싸는 부모 태그가 없다면 에러가 발생한다.

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

function Timer() {
	const name = "Hun"

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

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

import './App.css';

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

export default App;

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

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

5. camelCase

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

ex) hello_world → helloWorld

ex) count_down → countDown

실제로 react 내부 함수들이나 변수들도 모두 해당 규칙을 따라 지어진 것을 확인하실 수 있다

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

2. React 기본 시작: 설치

1. node(npm), yarn 설치

React를 설치하는 방법은 크게 두 가지가 있다.

npm을 이용한 방법
yarn을 이용한 방법

mac의 경우는 아래의 명령어로 node와 yarn을 설치하면 된다.

brew update
brew install node
brew install yarn

windows의 경우 직접 installer를 받아 설치한다.

node 설치 :
https://nodejs.org/ko/download/
yarn 설치 :
https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

2. react 시작

※ 해당 내용은 전부 vscode를 사용한다.
아래의 명령어를 입력하면 react를 본격적으로 개발하기 위한 틀이 생성된다.

yarn create react-app 폴더이름

이후 폴더를 열어 폴더 이름으로 접근을 한 뒤에
yarn start 명령어를 입력하면 localhost:3000에서 실행이된다!

실행하면 위와 같은 화면이 나오게 되며 이 화면은 src폴더 안의 App.js에 있는 컴포넌트이다.

해당 파일 안에 있는 html 내용을 수정하면 바뀌게 된다.

조금 더 세부적으로 설명하자면, 리액트는 사실 public 폴더 내부의 index.html 을 최종적으로 우리에게 보여준다.

아무것도 없어보이는 index.html 이 index.js 를 통해서, app.js 내부의 내용으로 변경되는 것이다! (root 라는 id 를 가진 div 부분이 app.js 로 변경됨)

즉, index.html → index.js → app.js 를 거쳐서 바로 이 app 컴포넌트가 우리 눈에 보이게 되는 것이다.

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

1. component 만들기

src 폴더 안에 components폴더를 만드고, 그 안에 js파일 하나를 만들어 보자.

해당 js파일 안에 rfce를 입력하고 엔터를 누르면 react 함수형 컴포넌트의 가장 기본적인 형태의 코드가 입력된다.

만약 rfce를 입력하고 아무것도 나타나지 않았다면 vscode에서 추가기능인 ES7+React/Redux/React-Native snippets을 다운로드 하면 정상적으로 아래 코드가 자동완성이 된다!

import React from 'react'

function 파일이름() {
  return (
    <div>First</div>
  )
}

export default 파일이름

해당 컴포넌트를 우리가 보려면 App.js에 가서 다음과 같이 수정하면 볼 수 있다.

import 파일이름 from './components/파일이름';

function App() {
return (
  <div>
    <파일이름 />
  </div>
);
}

export default App;

2. props 활용(비구조 할당)

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

vue를 공부했으면 똑같은 개념이라고 생각하고 사용해보면 이해하기 쉬울 것이다.

위에서 예시를 그대로 가져오면 상위 컴포넌트는 당연히 App.js가 될 것이고 하위 컴포넌트는 파일이름이 될 것이다.

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

문자의 경우 변수명 = 문자열, 숫자의 경우 변수명 = {숫자}로 쓸 수 있다.

import 파일이름 from './components/파일이름';

function App() {
return (
  <div>
    <파일이름 name="Hun"/>
  </div>
);
}

export default App;

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

import React from 'react'

function 파일이름({name}) {
  return (
    <div>{name} 파일이름</div>
  )
}

export default 파일이름

import React from 'react'

function 파일이름(props) {
  return (
    <div>{props.name} 파일이름</div>
  )
}

export default 파일이름

여러 변수를 넘길 수도 있다!

import 파일이름 from './components/Timer';

function App() {
  return (
    <div>
      <파일이름 name="Hun" number={5}/>
    </div>
  );
}

export default App;

import React from 'react'

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

export default 파일이름

props 를 쓰는 것이 좋은 이유는, 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다는 점이다.
틀은 유지한 채로, 값만 우리가 원하는대로 바꿔서 여러 개의 수표를 만들어 놓을 수 있다고 생각하면 될 것 같다.

import 파일이름 from './components/파일이름';

function App() {
  return (
    <div>
      <파일이름 name="Hun" number={5}/>
      <파일이름 name="Seung" number={2}/>
      <파일이름 name="Byeon" number={7}/>
    </div>
  );
}

export default App;

props 를 받아올 때는, **비구조할당**을 쓰는 것이 가장 좋다.

**비구조할당**이란 아래와 같이 변수를 분해하면서 받아오는 것을 말한다!

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

const {name, number} = data

import React from 'react'

function 파일이름(props) {
	const {name, number} = props

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

export default 파일이름