[BASIC]React

리액트

프론트앤드 개발을 위한 JS 오픈소스 라이브러리

특징 3가지

선언형, 컴포넌트 기반, 범용성

• 선언형(Declarative)

하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 - HTML, JS를 한곳에서

• 컴포넌트 기반(Component-Baesd)

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

컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 능 자체에 집중하여 개발. - 쇼핑몰의 아이템

따라서 독립적, 재사용성의 특징을 가지고 있고 기능 작동의 집중하여 개발, 유지보수, 유니테스트의 장점을 가지고 있다.

• 범용성(Learn Once, Write Anywhere)

JS프로젝트 어디에든 유연하게 적용

JSX

1. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법, 리엑트 엘리먼트를 만든다

2. 하지만 바로 브라우저가 실행하지 못하기 때문에 Babel을 통해 JS로 컴파일 후 브라우저로 렌더링

3. JS만으로 마크업 형태의 코드를 작성 DOM에 배치

JSX 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트 포함
• class 사용시 claaName으로표기
• JS 표현식 사용시, 중괄호 이용
• 사용자 정의 컴포넌트(React 엘리먼트)는 대문자로 시작
• 조건부 렌더링에는 삼항연산자 사용(if문은 표현식이 아니라서 변수에 담기지 않는다)
• 여러개의 HTML 엘리먼트 표시할 때 map()함수 사용, map함수 사용시 ‘key’ JSX속성을 추가(하지 않으면 불필요한 렌더링 발생)

function Blog() {
  const content = posts.map((post) => {
    <div key={post.id}></div>;
  });
}

배열 메소드 활용

function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

key 속성

key 속성값은 가능하면 데이터에서 제공하는 id를 할당. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문. 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결. 배열 인덱스는 최후의 수단(as a last resort)

컴포넌트

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가짐. 이 계층적 구조(hierarchy)를 트리 구조로 형상화 가능.

Create React App

새로운 리액트 프로젝트 앱 만드는 방법

npx create-react-app@latest 폴더이름

etc..

프레임워크 vs 라이브러리 차이점!!