TIL no.26 - [React 2탄] Component & JSX

 

리액트의 가장 큰 장점에 대해서 이야기하자면 

규모가 커지고 다양한 UI를 구현하게 되면서 유지보수하기 힘들어진 코드를 관리하기 편하게 만들어졌습니다 ! 

이 가장 큰 장점은 바로 Component라는 재활용 가능한 UI 구성 단위 때문입니다.

바로바로 Component가 React에서 얼마나 중요한 요소인 지를 알려주는 대목입니다.

그럼 한번 정리해보도록 하겠습니다 !

 

 

- Component

종류

Class Component

: stateful 함수라고 불리며 Component 내부에 state를 가지며 라이프사이클이 있는 컴포넌트입니다.

최근에 functuinal Component가 등장했으며 Class Component로만 Component를 만들면 성능이 악화될 수도 있습니다.

import React from 'react'

class Hanuel extends React.Component {
  render() {
    return (
			<div>
				<h1>I'm Haneul!</h1>
			</div>
		)
  }
}

export default Haneul;

-> 클래스형 컴포넌트는 위와 같은 형태를 이루며 render 함수가 꼭 있어야 합니다.

return 안에 있는 HTML의 형태를 가진 JSX 를 반환합니다.

 

 

Functional Component

: stateless 함수로 알려져 있으며, 리렌더링이 다시 일어나지 않는 component 같은 경우에 이 함수를 이용하여 구현하면 좋습니다.

state나 Lifecycle, API를 사용하지 않을 때, 함수형 컴포넌트를 사용하면 유지보수와 성능에 좋습니다.

import React from 'react'

const Frontend = () => {
  return (
			<div>
				<h1>I'm Frontend Developer</h1>
			</div>
		)
};

export default Frontend;

-> 함수형 컴포넌트는 state함수가 없으며 react hook을 사용한다면 state를 사용할 수 있다고 들었으나 아직 배우지 않아 생략하겠습니다.

 

 

 

⛳️ 결과적으로 현재는 Functional Component를 주로 사용하며 Class Component의 사용을 최대한 줄이는 것이 성능을 좋게 하며 유지 보수를 더 효율적으로 할 수 있는 방안입니다.

 

//

 

 

-하지만 저는 westagram 이라는 instagram 클론 프로젝트를 할 때 class Component를 사용했는데요. 

  Functional Component가 더 이용된다고는 하지만 react를 처음 배우는 입장에서 state와 props, lifecycle 그리고 API 를 연결하는 것까지 기본부터 제대로 공부하고 싶어서 Class Component를 이용해서 프로젝트를 진행했습니다.

 

 

- JSX

JavaScript Syntax Extension

 

JSX 란 리액트에서 사용하는 자바스크립트 확장 문법입니다.

JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨 을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

HTML 태그의 형태로 작성하기 때문에 보기 쉽고 익숙합니다.

거의 HTML와 비슷한 구조이지만 몇가지 다른 점이 있습니다.

class 를 className 으로 이름을 주며 

  inline style  을 줄 수 있는데 <div style={{color: "blue"}}> I'm haneul </div> 와 같이 작성합니다.

또한 안에 내용이 없는 태그는 열고 닫는 태그 둘다 필요없이 <div /> 닫는 태그만으로도 작성가능 합니다.

또한 JSX의 큰 특징으로 내부 요소를 감싸는 최상위 요소가 있어야 합니다.

그렇기 때문에 최상위 요소가 없다면 

<>
	<div />
    <h1> 야야야야야 </h1>
    <p> 호호호호호 </p>
</>

위와 같이 최상위 요소를 만들어 줄 수 있습니다.