2022-01-05 T.I.L

React intro

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

What is React

 

리액트는 프론트엔드 개발을 위한 JS 오픈소스 라이브러리이다.

- 리액트의 특징 세가지

 

1. 선언형(Declarative)

 

한 페이지를 보여주기 위해 HTML/ CSS/ JS로 나누기보다

하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍

 

2. 컴포넌트 기반

 

하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 컴포넌트 기반.

 

장점) 컴포넌트간의 의존성 down, 독립성 up, 재사용성 up => 유지보수, 유닛 테스트 하기 좋음

 

3. 범용성

 

프레임워크는 생태계에 종속되어있지만 리액트는 기존 프로젝트에서 사용 가능, 페이스북에서 관리 

 

JSX

JavsScript XML : JS를 확장한 문법 근데 XML이 뭔데 ?

 

eXtensible Markup Language의 약어. W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는

다목적 마크업 언어이다. 마크업 언어는 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지이다.

가장 친숙하고 흔하게 접할 수 있는 마크업 언어로 HTML이 있다. by 킹무위키

 

 

물론 JSX 를 JS로 바꾸기 위해 컴파일이 필요하대

* JSX는 HTML이 아니다!

 

- 기존 DOM은 HTML, CSS, JS로 구성되어있지만 React DOM은 CSS JSX 2개임. 한 개 줄음!

 

- 컴포넌트 :  구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋

 

물론 JSX없이 React를 쓸 수 있지만 가독성 down, 복잡성 up

 

JSX 활용(주요 문법)

 

- 하나의 엘리먼트안에 모든 엘리먼트가 포함되어 있어야함. 

 

왼쪽은 div엘리먼트가 2개 따로임. 오른쪽처럼 큰div로 묶어줘야함

- 엘리먼트클래스 사용시 HTML처럼 class x className 0

 

- JS식 표현식 사용시 { } 이용, 안하면 일반 text로 인식

 

Example1) 예제

const name = 'Josh'

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

 

- 사용자 정의 컴포넌트는 대문자로 시작(Pascal Case), 그냥 소문자 사용시 일반적인 HTML로 인식

 

function hello {
  return <hello/>
} // 잘못된 예

function Hello {
  return <Hello/>
} // 올바른 예

- 조건부 렌더링에서는 if문 말고 삼항연산자 사용!

 

- 여러개의 엘리먼트 표현할때 map() 매서드 사용 & 긜고 꼭 안에 key JSX속성 넣기!(웬만하면 id로)

 

Example2) map() 사용 예시

function Blog() {
  const blogs = posts.map((post) => {
    <div key={post.id}> // key를 post id를 넣어줌 왜?
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  });
  return <div>{blogs}</div>
}

 

 

컴포넌트(component)

 

- 리액트의 심장. UI를 구성하는 필수 요소

 

컴포넌트가 5개네 물론 가장 큰 컴포넌트는 아마 App??

리액트앱 사용법

 

- 리액트앱 다운 : - npx create-react-app [만들폴더이름]

 

- 리액트앱 시작법 : npm run start -> React html 뜸

 

- scr폴더 : 필수적인 파일 저장

 

- index.js에서 import 부분 : 파일들 불러옴

 

- 리액트 포트 강제종료법 :

 

1. lsof -i tcp: 3000

2. 로컬호스트 PID 찾기

3. kill -9 [PID]