2022-01-05 T.I.L

정종훈·2022년 3월 1일

T.I.L

목록 보기

4/20

React intro

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

리액트의 특징 세가지

1. 선언형(Declarative)

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

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

2. 컴포넌트 기반

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

3. 범용성

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

JSX

JavaScript 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 o
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를 넣어줌 왜? id는 고유하니까!
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  });
  return <div>{blogs}</div>
}