모던 리액트 #1

dldzm·2021년 8월 23일

Javascript 기본

목록 보기

9/9

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

1장. 리액트 입문

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

리액튼느 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니다. 아예 다 날려버리고 처음부터 모든 것을 새로 만들어서 보여주는 것이다.

하지만 말 그대로 모든 것을 다 날려버리고 모든 것을 새롭게 만들게 된다면 동적 페이지에서는 속도가 매우 느릴 것이다. 이런 문제점은 virtual DOM 이라는 것을 사용하여 해결하였다.

virtual DOM은 가상 DOM인데 메모리에 가상으로 존재하는 DOM으로서 그냥 javascript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.

✔️ virtual DOM을 통해 "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었다.

2. 작업환경 준비

💣 Webpack, Babel은 무슨 용도인가?
리액트 프로젝트는 컴포넌트를 여러가지 파일로 분리해서 저장하고 이 컴포넌트를 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 된다. 여러가지 파일을 한개로 결합하기 위해서는 Webpack이라는 도구를 사용하고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서는 Babel이라는 도구를 사용할 것이다.

<React.StrictMode>

그 및 실습 예제들

✔️ <>, </> 와 같이 이름 없는 Fragment를 생성할 수 있다. 또는 Self Closing tag (<hello /> 와 같다.)를 사용해야 한다.
✔️ 대신에 무조건 닫아야 한다.
✔️ 자바스크립트 변수를 보여줘야 할 때는 {변수}를 사용한다.
✔️ 인라인 스타일은 객체 형태로 작성을 해야 하며 camelCase형태로 네이밍해줘야 한다.
✔️ CSS class를 설정할 때에는 class=가 아니라 className=으로 설정해야 한다.

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

function App() {
  const name = "react";
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : 24,
    padding : '1rem'
  }
  return (
    <>
      <Hello />
      <div style = {style}> {name} </div>
      <div className = 'gray-box'></div>
    </>
  );
}

export default App;

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

✔️ 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다.

props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 됩니다.

✔️ 내부의 내용이 보여지게 하기 위해서는 Wrapper에서 props.children 을 렌더링해줘야 한다.

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;

쓰이는 곳(App.js)에서 값을 정하는 것은 props(부모)
쓰임 당하는 곳(Hello.js나 Wrapper.js)에서는 값을 정하는 것이 children

6. 조건부 렌더링

✔️ 단순히 특정 조건이 true 이면 보여주고, 그렇지 않다면 숨겨주고 있는데요, 이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 간편하다.

props 값 설정을 생략하면 = {true}

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;

isSpecial = {true}는 isSpecial만 적어도 true로 간주해준다.

useState를 통해 컴포넌트에서 바뀌는 값 관리하기

✔️ 리액트에서 엘리먼트에 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해줘야 한다.

동적인 값 끼얹기, useState

컴포넌트에서 동적인 값을 상태(state)라고 한다. 리액트에는 useState라는 함수가 있어 컴포넌트의 상태를 관리할 수 있다.

import React , {useState} from 'react';

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

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

export default Counter;

위에서는 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줬다. 하지만 이번에는 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있다.

import React , {useState} from 'react';

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

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

export default Counter;

💣 const [number, setNum] = useState(0);로 선언했는데 어떻게 값이 바뀌는가?

Not really. When the component is rerendered, the function is executed again, creating a new scope, creating a new count variable, which has nothing to do with the previous variable.

const [state, setState] = useState(); 라고 선언했을 떼, 함수에 파라미터로 함수를 넘겨주면 이전 값을 넣어주는 것으로 개발이 된 것이다.

💣 setNumber(number + 1); 와 setNumber(prevNumber => prevNumber + 1);의 차이점?