[React] React.js 리액트 특징! 간단하게 알아보자

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *

 

 

 

리액트

리액트는 2013년 facebook에서 발표한 UI를 만들기 위한 오픈소스 자바스크립트 라이브러리입니다.

오픈소스이기 때문에 facebook과 많은 개발자들에 의해 지속적으로 업데이트되고 있습니다.

따라서, 리액트는 풍부한 라이브러리를 보유하고있습니다.

 

 

 

그렇다면 기존 JavaScript와 비교해서 리액트로 개발하면 어떤 점이 좋을까요?

 

• JS는 기본적으로 DOM을 이용해서 요소를 참조하고(예를들어 document.querySelector) 값을 추출하기때문에 만약 해당 요소의 id값을 참조하고있었는데 id값이 변경된다면 사용하고있는 코드를 전부 고쳐야하기 때문에 유지보수가 어렵게됩니다. 하지만 리액트는 변수에 값을 저장하기때문에 DOM에서 자유롭고, 개발 규모가 커질수록 엄청난 이점이있습니다.

 

• useState훅을 사용한 제어컴포넌트를 이용해 데이터 업데이트시 자동으로 해당 데이터부분의 UI만 업데이트 됩니다.

 

 

리액트의 .jsx 와 Component

 

리액트에는 jsx라는 기존 JavaScript와 유사한 문법을 사용하는 라이브러리가 있습니다.

jsx는 자바스크립트 안에서 html을 그릴수있도록 해주는 템플릿 라이브러리입니다. 개인적으로 이 부분이 '혁신적이다'라고 느껴습니다!.

 

const element = <div>HTML코드를 그냥사용</div>

 

기존의 JavaScript에서 HTML과 JS를 분리해서 사용했던 것을 같은 함수 내에서 바로 사용할 수 있게됐습니다.

jsx 문법은 아래와 같은 특징을 가집니다.

 

• HTML 태그내에서 JS연산 가능
• class -> className으로 사용해야함
• 스타일은 Object로 표현, camelCase로 표기
• 닫는태그 필수
• 최상단 element는 반드시 하나여야 함

 

특징들을 하나씩 예시로 살펴보겠습니다.

 

1. JS 연산

const Add = ({a,b}) => {
	return <div>{a} + {b} = {a+b}</div>
}

function App() {
	return (
    	<App a={1} b={2}/>  // 1 + 2 = 3
    )
}

 

2. class -> className

const element = <div className="divElem">div태그입니다</div>

 

3. inline-stlye 표현

const element = <div style={{ padding:10, backgroundColor:'red' }}></div>

// inline-style은 개발규모가 커질수록 가독성과 재사용성의 저하를 불러일으킵니다. 아래와 같은 방식을 추천.

const styles = { padding:10, backgroundColor: 'red' };

const Component = () => {
	return <div style={ styles }></div>;
}

위에서 style은 Object 형식으로 표현한다고 했습니다. 첫 중괄호는 'JavaScript 문법을 사용한다' 라는 의미이고

두 번째 중괄호는 'Object 형식'을 의미합니다.

 

4. 닫는태그 필수

<div></div>
<input />
<img />
<Component />

jsx 문법에서는 태그를 닫아줘야합니다.

 

5. 최상단 element는 반드시 한 개

 

function App() {
	return (
    	<>
        	<div>디브태그1</div>
            <div>디브태그2</div>
        </>
    )
}

위 처럼 두 개의 div태그를 감싸는 부모태그는 항상 한 개 여야만 합니다. 아닐 시 오류가 발생합니다.

<> 와 </> 는 React.Fragment로 따로 태그를 사용하지않고도 자식을 그룹화 할 수 있습니다.

실제 렌더링시 Fragment 안의 내용만 출력됩니다.

 

 

이처럼 jsx문법은 기존의 JavaScript 문법을 따르면서도 미묘하게 다릅니다. 이 jsx문법을 활용해서 작은 기능조각으로 나눈 것이 바로 Component 입니다.

 

컴포넌트는 리액트에서 페이지를 구성하는 최소단위입니다.

 

컴포넌트는 다음과 같은 특징을 가집니다.

• 컴포넌트 이름은 무조건 대문자로 시작
• class 컴포넌트와 function 컴포넌트로 나뉩니다.
• 제어 컴포넌트(controlled component)와 비제어 컴포넌트(uncontrolled component)가 있습니다.

 

function App() {
	return (
    	<div>
        	<Component />
        </div>
    )
}

 

위 코드와같이 리액트를 처음 설치했을 당시에있는 App 함수도 함수형 컴포넌트입니다.

컴포넌트 안에 작성된 하위 Element를 children 이라고합니다.

각각의 기능을하는 컴포넌트들을 잘 끼워넣어서 하나의 페이지를 구성하는 것입니다.

 

정리

사용자 인터페이스(UI)를 위해 만들어진 리액트는

JavaScript내에서 HTML을 쓸 수 있는 JSX라는 문법과

높은 재사용성과 편리한 유지보수를 가능케하는 Component라는 방식으로 페이지를 구성하는

많은 이들에게 사랑받는 JavaScript 라이브러리입니다!

 

 

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *