Component, JSX

개발환경 구성하기

React를 사용하기 위해서 node가 설치되어 있어야 한다.

 

간단하게 아래 명령어를 통해 리액트 CRA 구성할 수 있다.

npx create-react-app my-app

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

React는 View 영역을 Component 단위로 관리한다.

마치 HTML 마크업 전에 영역을 크게 나누듯이 Component를 나누어서 프로그래밍을 해야한다.

이것또한 익숙해질려면 많은 연습이 필요하겠지.. 

 

리액트 컴포넌트는 클래스와 함수형으로 작성 할 수 있다

그런데 버전이 올라가면서 함수형 프로그래밍의 장점이 부각되면서 함수형으로 작성이 대세가 되었다고 한다.

그래서 함수형으로 작성하는 것으로 연습하고 익혀보려고 한다.

리액트 컴포넌트를 만들 땐 아래와 같이 리액트를 불러와서 사용해야 한다.

컴포넌트는 상단에서는 항상 리액트를 불러오고 하단에서 항상 컴포넌트를 사용할 수 있도록 export 해준다.

// Hello.jsx
import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

 

// App.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />  // 재사용이 가능하다 
      <Hello />  // 쉽게
    </div>
  );
}

export default App;

 

JSX (JavaScript XML)

JSX라 하며 JavaScript를 확장한 문법으로 HTML 태그가 보이는 자바스크립트입니다

태그는 Self-closing이 가능하며, 꼭 닫는 태그가 있어야 합니다. 

 

2개 이상의 태그는 꼭 하나의 태그로 감싸져야 하는데 최상위 부모는 1개여야만 합니다. 

// App.js
import React from 'react';
import Hello from './Hello';

function App() {
  const someStyle = {color:"green"};
  return (
    {/* jsx, 주석 */}
    <div>
      <h1 style={{backgroundColor:"black", color:"white"}}>HELLO</h1>
       {/* 변수 사용도 가능하다 */}
      <h2 style={someStyle}>hello</h2>
    </div>
  );
}

export default App;

 

참고 

: 벨로퍼트와 함께 하는 모던리액트

: 노마드코더-리액트무료강의

: 시니어코딩 Youtube