Component&JSX
React에서 Component란?
Component(구성요소, 부품)은 react에서,재사용 가능한 UI단위를 뜻한다. 이름 그대로 풀이하여, 부품처럼 이곳 저곳 필요한곳에 사용 할 수 있는것이다.
컴포넌트의 특징으로는
-
재사용 할 수 있다.
-
코드의 유지보수가 용이하다.
-
해당 페이지가 어떻게 구성 되어 있는지 알기 쉽다.
-
한 컴포넌트는 다른 컴포넌트를 포함할 수 있다.
가 있다.
컴포넌트의 종류
컴포넌트에는 크게 두가지 종류가 있는데,
-
Class Component
-
Functional Component
로, Class Component는 Class로서 선언되어 사용 되는 컴포넌트로,
Class Component
import React from 'react'
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component처럼 나타낸다.
컴포넌트를 처음 선언하기 위해서는, CRA로 리액트를 실행하고, js파일에 리액트를 import시킨다.
이때, 컴포넌트가 될 Class 혹은 Function은 camelCase를 지키되, 첫 문자는 대문자로 시작한다.
가장 큰 특징으로는 Class를 선언하고, 반드시 render()메서드를 포함해야 한다는것이다.
또한, render()메서드는 html처럼 생긴 JSX를 return한다.
마지막으로, export default를 사용해서, 다른 컴포넌트에서 이 컴포넌트를 사용할 수 있게 만든다.
Functional Component
import React from 'react'
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div>
)
};
export default ComponentFunctioal Component는 Class Component와 다르게 함수로서 선언된다.
전반적인 흐름은 Class Component와 같으나, Functional Component는 render()메서드를 사용하지 않고, 바로 JSX를 return한다는 특징이 있다.
이때문에 함수형 컴포넌트는 클래스 컴포넌트에 비해서 작성하기 쉽고, 간단한 장점이 있다.
하지만, 함수형 컴포넌트는 추후에 다룰 state를 갖지 않음으로, lifecycle메서드를 다룰 수 없다는 단점이 있다.
이는 추후에 포스팅으로 다루도록 하겠다.
현재는 Hook의 존재로 함수형 컴포넌트도 state를 사용 할 수 있다.
JSX
위에서 클래스 컴포넌트와 함수형 컴포넌트의 공통점은, JSX를 반환하는 것이라 하였다.
이 JSX는 무엇일까?
JSX에 대해 알아보자
JSX의 정의
JSX(JavaScript Syntax Extension)는 자바스크립트의 확장 문법이라는 의미를 가지고 있는 요소이고,
오직 리액트에서만 사용 되는 문법이다.
JSX는 html처럼 생겼지만, html도, JavaScript도 아니다.
때문에 브라우저가 바로 JSX를 알아 들을 수 없기 때문에, Babel을 이용하여 일반 자바스크립트 문법으로 컴파일 하여 사용하게 된다.
JSX의 장점
JSX는 html과 비슷하기때문에, 보기 쉽고 익숙하다는 장점이 있다.
또한, 자바스크립트 안에서 사용되므로, html과 자바스크립트를 이용하여 동시에 사용하는것이 가능하다. 이 예로는 DOM과 event의 핸들링이 있다.
JSX의 사용
JSX는 일반 자바스크립트가 아니기 때문에, JSX를 사용하면서 자바스크립트를 사용하기 위해선 좀 특별한 사용법이 필요하다.
const name = "World";
<h1>Hello {name}!</h1>와 같이, 자바스크립트를 사용할땐 {}안에 선언하여 사용해야 한다.
두번째로는, html과 다르게 JSX는 class를 사용하지 않는다.
그 이유는 자바스크립트가 가지는 class와 겹치기 때문이다. 같은 이유로 label의 for도 반복문과 키워드가 겹치기 때문에, 각각 className과 htmlFor로 사용한다.
JSX에서 인라인으로 스타일링을 하려면,
<div style={{color : "red"}}>Hello React</div>과 같이, {{}}를 사용하여 스타일을 선언하게 된다.
다음으로, JSX는 모든 태그가 Self Closing이 가능하며, 모든 태그는 마지막이 닫혀 있어야 한다.
<div />와 같이 html에선 불가능 했던 태그 사용이 가능한것이다.
마지막으로, return되는 JSX의 최상위 요소는, 항상 형제가 없는 하나의 요소여야 한다.
때문에 등장한 개념이 바로 Fragment라는 개념인데,
<>
<div />
<div />
<div />
</>처럼, <> </>두개의 빈 태그로 감싸서, 형제가 없는 요소로 return해야 한다.
다른 특징으로는, DOM엘리먼트를 지정할 필요가 없기 때문에, addEventlistener보다는 해당 요소의 속성에 onEvent를 사용하게 된다.
