[React] # 2 Component & JSX

Component

정의

재활용이 가능한 UI의 구성 단위. 컴포넌트를 통하여 우리가 보게되는 View를 구성하며 각각의 역할을 가능하게 합니다. 단위적으로 독립적인/종속적인 역할을 수행하면서 각각의 변화 사항에 대한 State와 종속 사항에 대한 Props를 가집니다.

특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.
  (부모 컴포넌트 - 자식 컴포넌트)

종류

Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}

export default Component

• 클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 리턴합니다.
• 생명 주기 메서드의 사용에 있어서 구분이 구체적이며 정교한 컨트롤이 가능합니다.

Functional Component

import React from 'react'

const Component = () => {
  return (
    <div>
      <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component

• 함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있습니다.
• 상태 관리 및 생명 주기 메서드 사용에 있어서 보다 간편하게 관리가 가능합니다.
• 스스로가 필요한 대로 커스텀하여 Hooks를 구성하고 이를 활용하는 것이 가능합니다.

사용

재사용할 가능성이 조금이라도 있으면 컴포넌트로 만들어주는 것이 좋습니다. 공통적으로 사용되는 양식에 대해서는 컴포넌트를 더 구체적으로 분리시켜서 사용하는 것이 가능합니다. 재사용 가능성이 1이라도 있으면 컴포넌트로 만들어봅시다!

JSX

정의

• JavaScript Syntax Extension
• JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다.
• JSX는 원래의 JavaScript 문법이 아니기 때문에, js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못하고 문법 오류가 발생합니다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

element

HTML 문법을 JS 코드 내부에 써주면 JSX로 react 환경 상에서 동작합니다. js 파일 어디에서나 필요한 곳에 작성하면 되며, 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다. 즉, JSX를 조건문 및 반복문으로 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

const hi = <p>Hi</p>;
const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

attribute

태그에 attribute(속성)을 주고 싶을때는 항상 쌍따옴표 "" 로 감싸줘야 하며, 해당 속성을 통하여 props를 넘겨주고 활용이 가능합니다.

장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
• JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다.
• HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.
• vs. DOM + EventHandling 비교

특징

• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)
• 자바스크립트 표현식 : { ... javascript... }
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 항상 하나의 태그로 시작

  const wrong = (
    <p>list1</p>
    <p>list2</p>
  );

Rendering

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);