React 기초

1. 리액트란?

• 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
• 오픈소스란 소스가 공개되어 있고(저작권자가 공개) 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어
• 라이브러리란 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합

2. 리액트의 특징

선언형

• 리엑트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함.(직관적)

컴포넌트 기반

• 컴포턴트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것
• 리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
• 컴포넌트를 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있음.
• 에러난 기능을 그 기능을 구현한 컴포넌트의 코드를 먼저 보고 에러를 찾을 수 있어 유지보수가 편함.

범용성

• 리엑트는 자바스크립트 라이브러리라고 불리며 리엑트는 javascript 프로젝트 어디에든 유연하게 적용될 수 있다.
• facebook에서 관리되어 안정적이고, 가장 유명하며, 리엑트 네이티브로 모바일 개발도 가능하다.

3. JSX

JSX란?

• React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
• JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아님
• 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 하는데 이때 이용하는 것이 Babel이다.
• JSX는 JavaScript를 확장한 문법으로 주로 React 컴포넌트를 작성할 때 사용하는 문법
• JSX는 createElement 등의 메서드를 사용하지 않고도 React 엘리먼트를 만들 수 있다.

JSX 활용

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.

예시

❌ 틀린 예시

<div>
  <h1>Hello</h1>
<div>
<div>
  <h1>World</h1>
<div>
  
⭕️ 올바른 예시
  
<div>
  <div>
   <h1>Hello</h1>
  <div>
  <div>
   <h1>World</h1>
  <div>
</div>   

• React에서 CSS class 속성을 지정하려면 "className"으로 표기 해야한다.

예시

❌ 틀린 예시

<div class = "select">Hello!</div>

⭕️ 올바른 예시

<div className = "select">Hello!</div>

• SX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야한다.

function App() {
    
  const name = 'Park';

  return (
      <div>
        Hello,{name}
      </div>
    );
}

• React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다.

❌ 틀린 예시

function hello() {
    
  return <div>Hello!</div;
}

function HelloWorld(){
  
  return <hello />;
}

⭕️ 올바른 예시

function Hello() {
    
  return <div>Hello!</div;
}

function HelloWorld(){
  
  return <Hello />;
}

• 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.
• React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용해야 하고, map 함수를 사용할 때는 반드시 "key" JSX속성을 넣어야 한다.

Component 정의

• 하나의 기능 구현을 위한 여러 종류의 코드묶음, ul을 구성하는 필수 요소이다.
• 컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있음.
• 리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며,
  이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다.
• 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다.
• 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있습