[리액트를 다루는 기술 1~2장] 요약 정리+스터디 문제

리액트 스터디

by front-hyun 2023. 9. 20. 23:02

1장. 리액트 시작

1.1 왜 리액트인가?

페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 바로 리액트(React)입니다.

리액트 이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리입니다.
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 합니다.
사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 합니다.
리액트 컴포넌트가 최초로 실행한 ‘초기 렌더링’과 컴포넌트의 데이터 변경으로 다시 실행되는 ‘리렌더링’ 개념을 이해해야 합니다.

초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다.

render() { ... }

최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업(markup)을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입합니다.

조화 과정

리액트에서 뷰를 업데이트할 때는 “업데이트 과정을 거친다”라고 하기보다는 “조화 과정(reconciliation)을 거친다”라고 하는 것이 더 정확한 표현입니다.
render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다.
자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트하는 것이죠.

1.2 리액트의 특징

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다.

DOM

DOM은 Document Object Model의 약어입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.
DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.
DOM은 동적 UI에 최적화되어 있지 않다는 단점이 있다.
해결법: Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

HTML의 DOM 트리

Virrtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

3. 바뀐 부분만 실제 DOM에 적용합니다.

기타 특징

일부 웹 프레임워크가 MVC 또는 MVW 등의 구조를 지향하는 것과 달리 리액트는 오직 뷰만 담당합니다.
리액트는 프레임워크가 아니라 라이브러리입니다.
. 다른 웹 프레임워크가 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하고 있는 반면, 리액트는 정말 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 합니다.
라우팅에는 리액트 라우터(react-router), Ajax 처리에는 axios나 fetch, 상태 관리에는 리덕스(redux)나 MobX를 사용하여 빈 자리를 채우면 됩니다.
리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있습니다.

1.3 작업 환경 설정

Node.js와 npm

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다.
Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치됩니다.
npm으로 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다.

yarn

yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공합니다.

VS Code 확장 프로그램

1. ESLint: 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구입니다.

2. Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음입니다. 검색했을 때 유사한 결과가 여러 개 나올 수 있는데 제작자가 charalampos karypidis인 것을 설치하세요.

3. Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구입니다.

git

Git은 형상 관리 도구(Configuration Management Tool)로 프로젝트 버전을 관리하고 협업을 할 때 매우 핵심적인 역할을 합니다.

create-react-app으로 프로젝트 생성하기

리액트 프로젝트를 만들 때는 이렇게 yarn create react-app <프로젝트 이름> 명령어를 사용합니다.
프로젝트 생성이 완료되었다면 다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동해 보세요.

$ cd hello-react
$ yarn start # 또는 npm start

2장. JSX

2.1 코드 이해하기

import React from 'react';

리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치됩니다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이죠.
Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있습니다. 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용합니다. 번들(bundle)은 묶는다는 뜻입니다. 즉, 파일을 묶듯이 연결하는 것이죠.

import logo from './logo.svg';
import './App.css';

웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있습니다.
이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당합니다.
css-loader는 CSS 파일을 불러올 수 있게 해 주고, file-loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해 줍니다.
babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줍니다.

function App() {
return (
  <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
);
}

App이라는 컴포넌트
function 키워드를 사용하여 컴포넌트를 만들었지요? 이러한 컴포넌트를 함수형 컴포넌트라고 부릅니다.
컴포넌트를 렌더링하면(렌더링이란 ‘보여 준다’는 것을 의미합니다) 함수에서 반환하고 있는 내용을 나타냅니다.
이 코드는 HTML이 아닙니다. 그렇다고 문자열 템플릿도 아닙니다. 이런 코드는 JSX라고 부릅니다.

2.2 JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다.
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

이렇게 작성된 코드는 다음과 같이 변환됩니다.
JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있습니다.

function App() {
return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

2.3 JSX의 장점

보기 쉽고 익숙하다

더욱 높은 활용도

JSX에서는 우리가 알고 있는 div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있습니다.
App.js에서는 App 컴포넌트가 만들어졌지요? src/index.js 파일을 열어 보면 이 App 컴포넌트를 마치 HTML 태그 쓰듯이 그냥 작성합니다.

2.4 JSX 문법

감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

import React from 'react';
 
function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
  );
}
 
export default App;

div 요소를 사용하고 싶지 않다면? 리액트 v16 이상 부터 도입된 Fragment라는 기능을 사용하면 됩니다.
코드 상단 import 구문에서 react 모듈에 들어 있는 Fragment라는 컴포넌트를 추가로 불러옵니다.

import React, { Fragment } from 'react';
 
function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}
 
export default App;

import React from 'react';
 
function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 쓸 수 있습니다.
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

If 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됩니다.
조건부 연산자의 또 다른 이름은 삼항 연산자입니다.

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}
 
export default App;

AND 연산자(&&)를 사용한 조건부 렌더링

import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}
 
export default App;

위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않습니다.
다음과 같이 && 연산자를 사용해서 조건부 렌더링을 할 수 있습니다.

import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다.
여기서 한 가지 주의해야 할 점이 있는데요. falsy한 값인 0은 예외적으로 화면에 나타난다는 것입니다.

undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 됩니다.
아래의 코드 오류 발생 !

import React from 'react';
import './App.css';
 
function App() {
  const name = undefined;
  return name;
}
 
export default App;

어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있습니다.

import React from 'react';
import './App.css';
 
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
 
export default App;

JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

import React from 'react';
import './App.css';
 
function App() {
const name = undefined;
return <div>{name}</div>;
}
 
export default App;
PREV

인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.
스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있는데요. 이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)으로 작성해야 합니다.
background-color -> backgroundColor

import React from 'react';
 
function App() {
  const name = '리액트';
  const style = {
    // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px', // font-size -> fontSize
    fontWeight: 'bold', // font-weight -> fontWeight
    padding: 16 // 단위를 생략하면 px로 지정됩니다.
  };
  return <div style={style}>{name} </div>;
}
 
export default App;

style 객체를 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 됩니다.

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div
      style={{
        // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px', // font-size -> fontSize
        fontWeight: 'bold', // font-weight -> fontWeight
        padding: 16 // 단위를 생략하면 px로 지정됩니다.
      }}
    >
      {name}
    </div>
  );
}
 
export default App;

class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정합니다.
하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 합니다.

꼭 닫아야 하는 태그

input 태그를 닫아 주어야 합니다.

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input></input>
    </>
  );
}
 
export default App;

self-closing 태그 = 태그를 선언하면서 동시에 닫을 수 있는 태그

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input />
    </>
  );
}
 
export default App;

주석

JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 조금 다릅니다.
JSX 내부에서 주석을 작성할 때는 {/* … */}와 같은 형식으로 작성합니다.

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div
        className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나 
      /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
      <input />
    </>
  );
}
 
export default App;

2.5 ESLint와 Prettier 적용하기

ESLint

ESLint는 문법 검사 도구
ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해 줍니다.

Prettier

Prettier는 코드 스타일 자동 정리 도구
JSX를 작성할 때는 코드의 가독성을 위해 들여쓰기를 사용합니다.
VS Code에서 F1을 누르고 format이라고 입력한 다음 Enter를 누르세요.

저장할 때 자동으로 코드 정리하기

윈도우의 경우: 파일 > 기본 설정 > 설정
텍스트 박스에서 format on save를 검색하여 나타나는 체크 박스에 체크해 주세요.

정리

JSX는 HTML과 비슷하지만 완전히 똑같지는 않습니다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 납니다. 2.4절에서 다룬 몇 가지 문법 차이를 잘 기억해 두세요.

스터디 문제

내가 낸 문제

1) ( )에 알맞은 단어를 채워넣으세요.

리액트는 ( ) 방식을 사용하여 ( ) 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

리액트는 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 ( )만 신경 쓰는 ( )입니다.

해설&정답)

Virtual DOM

DOM

V(View)

라이브러리

DOM은 Document Object Model의 약어입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.
Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

3. 바뀐 부분만 실제 DOM에 적용합니다.

2) 다음 코드는 동작하지 않습니다. 오류가 나는 이유와 오류를 해결할 수 있는 세 가지 방법을 제시하세요.

import React, { Fragment } from 'react';
 
function App() {
  return (
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
  );
}
 
export default App;

해설&정답)

리액트 컴포넌트에서 요소 여러 개를 반드시 하나의 요소로 감싸주어야 합니다.
왜 감싸야 하는지? Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
1번째 방법은 div 요소로 감싸기
2번째 방법은 Fragment 기능 사용하기( 반드시 Fragment 컴포넌트 import해야 함! )
3번째 방법 빈 태그로 감싸기

//1번째 방법
import React, { Fragment } from 'react';
 
function App() {
  return (
     <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
     </div>
  );
}
 
export default App;
//2번째 방법
import React, { Fragment } from 'react';
 
function App() {
  return (
     <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
     </Fragment>
  );
}
 
export default App;

//3번째 방법
import React, { Fragment } from 'react';
 
function App() {
  return (
     <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
     </>
  );
}
 
export default App;

스터디원이 낸 문제

1) 다음 중 알맞은 설명을 고르고, 틀린 설명은 올바르게 고쳐보세요.

① 자주 사용되는 기능들을 정리해 모아 놓은 것을 프레임워크라고 한다.

② 사용자와 컴퓨터 프로그램이 서로 상호작용하기 위해 서로간의 입출력을 제어해주는 것을 UX 라고 한다.④ 프레임워크는 흐름의 제어 권한을 개발자가 가지고 있다.

③ 리액트는 대표적인 자바스크립트 UI 라이브러리이다.

④ 프레임워크는 흐름의 제어 권한을 개발자가 가지고 있다.

⑤ 라이브러리는 코드 작성에 도움이 되는 타인이 작성한 코드의 집합이 아니다.

해설&정답)

알맞은 설명: ③

① 자주 사용되는 기능들을 정리해 모아 놓은 것을 ~~프레임워크~~라이브러리라고 한다.

② 사용자와 컴퓨터 프로그램이 서로 상호작용하기 위해 서로간의 입출력을 제어해주는 것을 UX**UI(사용자 인터페이스, User Interface)**라고 한다.

④ 프레임워크는 흐름의 제어 권한을 ~~개발자~~프레임워크가 가지고 있다.

⑤ 라이브러리는 코드 작성에 도움이 되는 타인이 작성한 코드의 집합~~이 아니다~~이다

https://cocoon1787.tistory.com/745

[개발상식] 프레임워크(Framework) 와 라이브러리(Library)의 차이

🚀 "프레임워크와 라이브러리의 차이를 아시나요?"" "음... 프레임워크는 뼈대이고 라이브러리는 모듈 같은 것이고....😰" "그럼 최근에 사용하신 프레임워크와 라이브러리를 알려주세요." "... ex

cocoon1787.tistory.com

2) 다음 코드를 실행하면 오류가 발생합니다. 오류를 해결할 수 있는 2가지 방법을 찾아보세요.

import './App.css';

function App(){
	const name = '리액트';
	return (
		<>
			<div className="react">{name}</div>
			<input>
		</>
	);
}

export default App;

해설&정답)

input 태그를 닫아 주지 않아 발생한 오류입니다.

<input></input> → 이렇게 태그를 닫아주거나

<input /> → 태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수도 있습니다.(self-closing 태그)

3) 잘못된 내용을 고르시오.

(1) JSX 밖에서 if 문을 사용해 사전에 값을 설정할 수 있다.

(2) { } 안에 조건부 연산자를 사용할 수 있다

(3) 값이 0일 경우, false로 처리되어 아무것도 나타나지 않는다.

(4) 조건부연산자 대신 and 연산자를 사용할 수 있다

해설&정답)

정답 : (3)번

값이 0일 경우, falsy 처리되며, 화면에 그대로 나타난다!

해설 :

(4)번 + (3)번

AND 연산자 (&&) 를 사용한 조건부 렌더링
- 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않음
- falsy한 값인 0은 예외적으로 화면에 나타남!

#조건부 연산자 사용
function App() {
	const name = "뤼액트";
	return <div>{name === '리액트'? <h1>리액트입니다</h1> : null}</div>;
}
export default App;

#AND 연산자 사용
function App() {
	const name = "뤼액트";
	return <div>{name === '리액트' && <h1>리액트입니다</h1>}</div>;
}
export default App;

(1)번 + (2)번

if 문 대신 조건부 연산자
- JSX 밖에서 if 문을 사용해 사전에 값을 설정
- 혹은 { } 안에 조건부 연산자 사용 (삼항 연산자)

function App() {
	const name = '리액트';
	return (
		<div>
			{name === '리액트' ? (
				<h1>리액트입니다.</h1>
			):(
				<h2>리액트가 아닙니다</h2>
			)}
		</div>
	)
}

export default App;

4) 해당 코드에서 잘못된 부분을 고르시오.

#1

import { Fragment } from 'react';

function App() {
	return (
(1) <Fragment>
			<h1>리액트 안녕!</h1>
			<h2>잘 작동하니?</h2>
	(2) <input />
		</Fragment>
	);
}

export default App;

#2

function App() {
	const name = "뤼액트";
	return (
(3) <>
			<h1>리액트 안녕!</h1>
			<h2>잘 작동하니?</h2>
(4)	</>

		<div>
			(5) {name === '리액트'? <h1>리액트입니다</h1> : null}
		</div>

	);
}

해설&정답)

정답 : (4)번

컴포넌트 내에 여러 요소가 있다면, 반드시 부모 요소 하나로 감싸야 하는데,

아래 div 요소가 전체적으로 감싸이지 않은 상태,

</> 는 </div> 아래에 위치해야 올바른 코드가 된다!

해설 :

(1) <fragment></fragment> 로 묶을 수 있음

(2) 추가할 내용이 없으면 input 태그는 바로 닫을 수 있음

(3) <> </> 형태로 묶을 수 있음

(5) { } 안에 조건부 연산자 사용이 가능함 > 삼항 연산자 사용 o

참조) 리액트를 다루는 기술

https://thebook.io/080203/0033/

'리액트 스터디' 카테고리의 다른 글

[리액트] 블로그 포스트 생성 폼 만들기 (0)	2023.10.12
[리액트] 컴포넌트, 함수, Fragment, 이벤트, useState, Bootstrap (0)	2023.10.12
[리액트] 구구단 만들기 (0)	2023.10.05

프론트엔드 기록

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

1장. 리액트 시작

1.1 왜 리액트인가?

리액트 이해

초기 렌더링

조화 과정

1.2 리액트의 특징

DOM

Virrtual DOM

기타 특징

1.3 작업 환경 설정

Node.js와 npm

yarn

VS Code 확장 프로그램

git

create-react-app으로 프로젝트 생성하기

2장. JSX

2.1 코드 이해하기

2.2 JSX란?

2.3 JSX의 장점

보기 쉽고 익숙하다

더욱 높은 활용도

2.4 JSX 문법

감싸인 요소

자바스크립트 표현

If 문 대신 조건부 연산자

AND 연산자(&&)를 사용한 조건부 렌더링

undefined를 렌더링하지 않기

인라인 스타일링

class 대신 className

꼭 닫아야 하는 태그

주석

2.5 ESLint와 Prettier 적용하기

ESLint

Prettier

저장할 때 자동으로 코드 정리하기

정리

스터디 문제

내가 낸 문제

스터디원이 낸 문제

'리액트 스터디' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바