React 란?

자바스크립트 오픈소스 라이브러리이다. 리액트는 선언형이고, 컴포넌트 기반이고, 다양한 곳에 활용할 수 있다는 3가지 특징이 있다.

• 선언형

• 컴포넌트 기반

• 범용성

JSX

JSX는 JavaScript XML의 줄임말로 리액트에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 JSX를 이용하면 JS만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 된다. 하지만 그렇다고 해서 JSX가 HTML은 아니다. 생긴 모습만 비슷할 뿐이다.

JSX는 JS를 확장한 문법이지만 브라우저가 바로 실행할 수 있는 코드는 아니어서 브라우저가 이해할 수 있는 JS 코드로 변환해주어야 한다. 이 때 이용하는 것이 바로 Babel이다. Babel은 JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다. 컴파일 후, JS를 브라우저가 읽고 화면에 렌더링한다.

JSX 규칙

• return 안쪽에 있는 것은 태그 하나로 묶어야 한다.

function 함수명(){
  return (
    <div> // 리턴 안쪽의 내용을 div태그를 이용해 하나로 묶음
      <div><h1>Hello</h1></div>
      <div><h2>World</h2></div>
    </div>
  )
}

// 이렇게 별다른 의미 없는 div인 경우 태그명을 생략할 수 있다.
<>
  <div><h1>Hello</h1></div>
  <div><h2>World</h2></div>
</>

• 엘리먼트의 CSS 클래스(class) 속성 사용 시, className으로 표기한다.

<div className = 'greeting'>hello</div>

• JavaScript 표현식 사용 시, 중괄호{}를 써줘야 한다.

function App(){
  const name = 'Josh Perez';
  
  return (
    <div>
      Hello, {name} // 변수를 중괄호로 감싸줌
    </div>
    );
}

• 사용자 정의 컴포넌트는 대문자로 시작한다.

function Hello(){ // 대문자로 시작
  return <div>Hello</div>;
}

function HelloWorld(){
  return <Hello />; // 대문자로 시작
}

• if문은 JavaScript 표현식이 아니어서 조건부 렌더링에는 삼항연산자를 사용한다.

<div>
  {
    (1+1 === 2) ? (<p>정답</p> : (<p>탈락</p>)
  }
</div>

• 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 사용한다. 이 때 key속성을 꼭 넣어주어야 한다.key속성은 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어준다.

const posts = [
  {id: 1, title: 'hello world'},
  {di: 2, title: 'install'}
];

function Blog(){
  const content = posts.map((post) =>
	<div key={post.id}> // key를 넣어주어야 한다
    	<h3>{post.title}</h3>
    </div>
  )
  
  return ( <div>{content}</div> )     

컴포넌트(component)

컴포넌트는 각자 독립된 기능을 가지며, UI의 한 부분을 담당하기도 하는 코드 묶음이다. 이러한 컴포넌트를 여러개 만들고 조합하여 애플리케이션을 만들 수 있다.

컴포넌트를 이용하면 한 눈에 어떤 기능을 갖는 부분인지 파악할 수 있다. 또한 재사용이 가능하기 때문에 효율적이고 마크업과 디자인, 로직을 긴밀하게 연결하여 개발할 수 있다.

컴포넌트 만드는 방법

1. 만들고자 하는 컴포넌트 이름을 함수명으로 하여 함수로 정의한다.
2. 함수명은 대문자로 시작해야하고 함수명이 곧 태그명이다.
3. 연결하고자하는 컴포넌트에 함수명 태그로 연결해준다.

// 함수로 컴포넌트 정의
// Hello 컴포넌트
function Hello() {
  return <h1>헬로</h1>
}
// World 컴포넌트
function World() {
  return <h2>월드</h2>
}

// App.js의 App 컴포넌트에 연결
function App() {
  return (
    <div className='App'>
      <Hello></Hello>  // 또는 <Hello /> 로 축약 가능
      <World></World> // 또는 <World /> 로 축약 가능
    </div>
  )
}

그래서 언제 씀?

아래의 경우에 컴포넌트로 묶어서 주로 사용하고 이 외에도 본인의 필요에 따라 사용할 수 있다. 하지만 그렇다고 너무 남발해서 쓰는 것도 좋지 않으니 필요한 경우에 쓰도록 하자.

• 반복해서 쓰는 HTML 태그들
• 자주 변경되는 HTML UI들
• 다른 페이지를 만들 때