[React] Inflearn 처음 만난 리엑트(React) - 1~5강 개념정리

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React.js

 

 

강의

(Inflearn) 처음 만난 리엑트(React) - SOAPLE님

 

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

 

1강. React의 장단점

장점

• 빠른 업데이트 및 렌더링 속도
• 코드의 재사용성이 높아서 개발 속도가 빠르고 유지보수 용이
• 사용하는 개발자가 많기때문에 커뮤니티가 활성화되어있다

 

단점

꾸준하고 빠른 속도로 업데이트가 이루어져 새로운 내용들이 계속해서 나와 학습량이 방대해진다.

 

 

 

 

2강. create-react-app

리엑트 웹 개발을 위해 환경 설정을 해주는 도구

 

생성 명령어 : 터미널 - npx create-react-app [패키지명]

 

 

 

 

3강. JSX

JSX

JavaScript + XML/HTML

 

예시

const element = <h1 class="greeting">Hello, World!</h1>;

 

 

React.createElement

JSX 코드를 JS 코드로 변환해주는 함수

 

위의 코드를 변환하면 아래와 같은 JS 코드가 나온다.

const element = {
   type: 'h1',
   props: {
      className: 'greeting',
      children: 'Hello, World!'
   }
}

 

• type : element의 유형
• props: 속성들을 모아둔 곳
• children : 현재 element에 포함된 자식 element

 

 

JSX를 사용하는 이유

• 코드가 간결해지고 생산성이 늘어난다.
• 가독성이 향상된다. (버그를 발견하기 쉬워진다.)
• Injection Attacks를 방지해준다. (해킹 방지)

 

 

HTML안에서 Script 코드 사용법

script 코드를 중괄호('{}')로 묶어서 작성하면 된다.

 

예시

<h1>Hello, {name}!</div>

 

 

HTML 태그 안 속성에 값을 넣는 방법

script 코드를 중괄호('{}')로 묶어서 넣어준다.

 

예시

<img src={user.avatarUrl}></img>

 

단, JS코드가 아닌 문자열의 경우 큰 따옴표로 묶어서 넣어주면 된다.

 

예시

<div tabIndex="0"></div>

 

 

 

 

4강. Rendering Elements

Element

React App을 구성하는 가장 작은 블록들

 

 

React Element

• Virtual DOM에 존재하는 Element, JS의 객체 형태로 존재한다.
• React에서 언급되는 Element는 DOM Element가 아닌 React Element를 칭하는 것이다.

 

 

특징

불변성(immutable)

• Element 생성 후에는 children이나 Attributes를 바꿀 수 없다.
• 화면에 변경된 Element를 보여주기 위해서는 기존 Element를 변경하는 것이 아닌, 새로운 Element를 만들어서 보여준다.

 

 

Element 생성 및 렌더링

// React 17 문법
const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

// React 18 문법
const element = <h1>Hello, React!</h1>;
ReactDOM.createRoot(document.getElementById('root')).render(element);

 

첫 번째 요소인 React Element(element)를

 

두 번째 요소인 DOM Element(document.getElementById('root')에 Rendering한다.

 

 

 

 

5강. Component

React에는 모든 페이지가 Component로 구성되어있다.

 

레고 블럭을 조립하듯 Component를 조합하여 새로운 화면을 구성한다.

 

 

props(properties)

React Component의 입력

Component의 속성을 의미한다.

 

 

특징

모든 React Component는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줘한다.(Pure)

 

 

Pure

입력 값 (input)을 변경하지 않으며, 같은 입력 값에 대해서는 항상 같은 출력 값(output)을 리턴해준다.

 

예시

function sum(a+b) { return a+b; }

 

Impure

function withdraw(account, amount) { account.total -= amount; }

 

 

React Element

React Component의 출력

 

 

Component의 종류

1. Function Component

코드가 간단하여 가독성이 좋다.

 

예시

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>; 
}

 

 

2.Class Component

JS ES6의 Class를 이용해 만들어진 Component이다.

 

예시

class Welcome extends React.Component {
   render() {
      return <h1>Hello, {props.name}</h1>; 
   }
}

 

 

Component 명명 규칙

Component의 이름은 항상 대문자로 시작해야한다.

* React는 소문자로 시작하는 Component를 DOM Component로 인식하기 때문이다.

// HTML태그인 div로 인식한다.
const element = <div />;

// Welcome이라는 React Component로 인식한다.
const element = <Welcome name="인제" />;

 

 

Component Rendering

• 실제로 Component가 화면에 렌더링되는 것은 아니고 Component로 생성한 Element가 화면에 렌더링되는 것이다.
• React 17 버전에서는 ReactDOM.render() 함수를 사용하여 렌더링한다.
• React 18 버전에서는 ReactDOM.createRoot().render() 함수를 사용하여 렌더링한다.

 

 

Component 합성

• 여러개의 Component들을 합쳐 하나의 새로운 Component를 만드는 것이다.
• Component 안에 또 다른 Component를 사용할 수 있다.

 

 

Component 추출

• 코드의 재사용성이 높아지고 개발 속도가 향상된다.
• 생명 주기(Life Cycle)의 경우, 지금은 거의 사용하지 않는 Class Component에서 사용하는 함수이기 때문에 알고만 있으면 된다.