프론트 엔드 1주 1일차 - React와 JSX

1.React

react는 웹 프레임워크로 사용자의 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.

 

React의 특징

1. Component

리액트로 만들어진 앱을 이루는 최소 단위로 UI를 개별적인 코드로 나누어 반복 사용할 수 있게 만든다. 

component는 함수형과 클래스형이 존재한다.

2. Virtual DOM

가상의 DOM을 이벤트가 발생할 때마다 만들어서 실제 DOM과 비교하여 최소한의 변경만을 반영해 앱의 효율과 동작 속도를 개선한다.

3. 단방향 데이터 플로우

 

4. props 와 State

props :부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터

state : 컴포넌트 내부에서 선언한 값을 내부에서 변경하는 것으로 동적인 데이터를 사용할 때 사용한다.

5. JSX

JSX는 아래에서 자세히 설명

---

2. JSX란?

 JavaScript를 확장한 문법으로 UI의 형태를 설명하기 위해  React와 함께 사용하는 것이 추천됩니다. XML과 매우 비슷하며 정확하게는 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행되기 전에 코드가 번들링되면서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 바뀐다.

 

JSX의 문법

const name = 'vermil';

const hello = <h1>Hello {name}</h1>;

function title() {

  const a = 23

 

  return (<h1>hello, Vermil!</h1>)

 

  }

React에서 return 안에서 사용되며 HTML을 대신하여 웹의 구조를 만드는 데 쓰인다. 또한 반드시 하나의 부모 요소 안에 감싸져 있는 형태여야 한다(아닐 시 에러 발생). 왜냐하면 컴포넌트의 변화를 효과적으로 감지하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

 

또한 자바스크립트 표현식을 사용할 수 도 있는데 이 경우에는 {}안에 넣어줘야한다. 조건문 혹은 반복문을 사용하기 위해서는 위와 같이 삼항 연산자(조건부 연산자)를 사용해야 한다. 그렇지 않을 경우 if문을 return 밖에 정의해주는 방법 등으로 구현이 가능하다.

function Title() {

  const name = "vermil";

 

  return (

  <div>

    <div>

      { name === "vermil" ? <span> "사용자 확인되었습니다." </span> :  <span> "사용자 확인 실패했습니다." </span> }

    </div>

  </div>);

  }

function Title() {

  const name = "vermil";

  if (name === "vermil"){

  ment = <span> "사용자 확인되었습니다." </span> 

 }else {

 ment =  <span> "사용자 확인 실패했습니다." </span>

 }

  return (

  <>

      {ment}

  </>

 );

}

위 두 코드는 같은 결과를 return한다.

 

그리고 React에서는 undefined만을 렌더링하려고 하면 오류가 발생한다. 이경우 OR 연산자 등을 사용하여 오류가 발생하는 것을 아래와 같이 막을 수 있다. 하지만 JSX 내부에서는 undifined를 렌더링해도 상관 없다.

 

오늘의 코딩

quiz들과 JSX와 emotion을 이용한 페이지 코딩