메가바이트 스쿨 12주차 (2/27) react

정영찬·2023년 2월 27일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

메가바이트 스쿨 프론트엔드 4기

목록 보기

51/77

리액트가 대체 뭐길래...?

meta(전 페북) 에서 2011년에 만든 프론트 엔드 라이브러리이며 페이스북, 인스타그램, 넥플릭스 모두 이 React로 만들어졌다.

작동 원리(SPA)

하나의 html파일만 보여주고, 내부의 요소는 모두 자바스클비트를 활용해서 변경시키는 것
페이지가 변경될 때마다 무조건 새롭게 html,css 파일을 표시해야했던 방식보다 효율적이다
DOM은 html문서를 통해 생성된 자바스크립트를 통해서 조작 가능한 요소들을 뜻한다.
react는 가상으로 html요소들을 생성하고, 현재 화면에 표시되는 html 요소들과 비교해서 달라진 부분만 다시 그리는 방식으로 렌더를 진행한다.
요소가 달라질 때마다 새룹게 화면을 다 다시 그리는 것이 아니라, 달라진 부분만 react가 다시 그리는 것이다.

component?

React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 하는데, 컴포넌트는 하나의 html 페이지에서 요소들을 잘게 나눈 것이라고 생각하시면 됩니다!

컴포넌트로 페이지를 나누면

팀으로 하나의 페이지를 작성할 때 요소별로 나눠서 작업할 수 있다
복잡한 페이지의 코드를 조금 더 직관적으로 볼 수 있다.

리액트에서 쓰이는 자바스크립트 문법은 따로 있다.

JSX

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

import React from 'react'

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

export default Timer

return의 내용이 바로 JSX이다.

주의사항

반드시 전체를 감싸는 부모 태그가 하나 잇어야한다.
jsx 내부에서, 외부 자바스크립트 부분에서 선언한 변수나 함수를 쓸때는 {}기호를 쓴다.
jsx 내부에서, html 태스 요소에 class 를 주고싶을 때는 ,calssName을 쓴다.
주석은 {/ 주석내용 /} 형태로 사용할 수 있다.

camelCase

앞으로 리액트를 쓰면서 무조건 숙지해야할 내용이다. 자바스크립트를 사용하면서, 변수나 함수를 만들때는 첫번째 단어는 소문자, 두번째 단어부터는 대문자가 되도록 이름을 짓는다.

그래도 컴포넌트의 이름은 무조건 대문자로 시작해야한다.

리액트 시작하기

npm yarn 설치

yarn?

패키지 관리자입니다. 2016년에 페이스북에서 개발한 패키지 관리자로, 속도와 안정성 부분에서 npm 보다 더욱 발전했다고 평가받고 있습니다. 예전에는 yarn 이 npm 보다 훨씬 빠른 속도를 가지고 있었으나, 현재는 거의 차이가 없는 수준으로 npm 이 발전했습니다. 그러나 npm 의 발전과는 별개로, 리액트와 관련한 프로젝트는 대부분 yarn 을 토대로 개발이 되고 있습니다.

vite를 사용해서 앱 만들기

yarn create vite(앱이름) --template react

vite?

예전에는 cra로 생성을 했지만 요즘에는 vite를 사용해서 시작하려고 한다.
vite는 esbuild라는 번들러를 사용해서 ,기존의 방식에 비해서 훨씬 더 빠른 번들링 속도를 가지고 있다.

react의 변수와 상태

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

props 는 properties 의 줄임말로,

상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용된다.

App.js 와 Timer.js 중에서 상위 컴포넌트는 Timer.js 컴포넌트를 불러와서 쓰고 있는, App.js 가 상위 컴포넌트이다.

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

문자의 경우 변수명 = 문자열 ex) name=”김준태" 로 쓰고

숫자의 경우 변수명 = {숫자} ex) number={5} 로 쓸 수 있다.

import First from './components/First';

function App() {
  return (
    <div>
      <First name="김준태"/>
    </div>
  );
}

export default App;

상위 컴포넌트에서 작성한 변수를 아래의 2가지 방법으로 사용가능하다

import React from 'react'

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

export default First

import React from 'react'

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

export default First

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

state 활용하기

react 함수형 컴포넌트의 기본적인 형태는 아래와 같다

import React from 'react'

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

export default First

리액트가 업데이트 되면서 이제 첫째줄의 import를 작성하지 않아도 되도록 변경되었다.(와!)

만약 버튼을 클릭하면 카운터 숫자가 올라가는 컴포넌트를 만들어서 App.js에 렌더링 되도록 하고 싶으면 이렇게 하면 된다...?
components/First.jsx

import React from 'react'

export default function First() {
  // 클릭하면 숫자가 늘어나는 카운터 제작
  let test = 0 
  const countUp = () => {
    test += 1;
    console.log(test);
  }
  return (
    <>
      <p>{test}</p>
      <button onClick={countUp}>늘리기</button>
    </>
    
  )
}

App.js

import './App.css'
import First from './components/First';


function App() {

  return (
    <div className="App">

      <First/>
    </div>
  )
}

export default App

엥? 숫자가 안늘어난다?

react는 state를 쓰지 않는 변수는 업데이트해서 표시해 주지 않기 때문이다.

콘솔 로그로 변수의 값을 확인해보면 제대로 올라가고는 있었다.
따라서 값이 변경될 때마다 해당 부분을 다시 표시해주도록 하기 위해서는 useState를 사용하면 된다.

useState의 기본형태는

const [변수명, set변수명] = useState(변수의 초기값);

이렇게 생겼고, setTest의 경우는 state의 값을 변결하려고 할때 사용하는 함수라고 생각하면 된다.

import React from 'react'

export default function First() {
  // 클릭하면 숫자가 늘어나는 카운터 제작
  const [test, setTest] = React.useState(0);

  const countUp = () => {
    setTest(test + 1);
    console.log(test);
  }
  return (
    <>
      <p>{test}</p>
      <button onClick={countUp}>늘리기</button>
    </>
    
  )
}