Component / JSX

Component

Component: 재활용 가능한 UI 구성 단위

 

특징

1. 재활용하여 사용할 수 있다

2. 코드 유지보수에 좋다

3. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다

4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

 

Class vs Functional Component

 

컴포넌트는 두 가지 방식으로 선언할 수 있다

 

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

특징

1. render 함수 없이 바로 return을 한다

2. state를 저장하지 않는다 (저장하기 위해서는 React hooks를 사용 (useState))

 

JSX

 

JSX 정의

1. JavaScript Syntax Extension

2. JSX란 React에서 사용하는 자바스크립트 확장 문법

3. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 Babel을 사용하여 일반 JS 형태의 코드로 변환

 

JSX 장점

1. HTML 태그를 그대로 사용

2. HTML 태그를 사용하는 동시에 JS도 JSX안에서 동작하는것이 가능

 

JSX 특징

1. JS로 표현

2. class가 아닌 className으로 class이름 지정

3. Inline Styling

<div style={{color: "red"}}>Hello</div>

4. Self closing Tag

<div />

5. 모든 요소를 감싸는 최상위 요소 (<>....</>)

내부 요소들을 감싸는 최상위 요소가 있어야 한다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 자식들을 간단하게 그룹화 할 수 있는 기능이다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.

<>   <div className="loginBtn" onClick={() => console.log("click")}>Login</div>   <br />   <div style={{backgroundColor: "grey", height: "10px"}} /> </>