TIL) 리액트 기초, React의 3가지 특징, React 쓰는 이유, 잘 짠 코드의 기준은?

리액트란?

프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 입니다. 

 

 

리액트를 왜 사용하는 걸까?

 

리엑트의 아래 3가지 특징 덕분에 프론트엔드 개발을 더 효과적으로 할 수 있다. 

1. 선언형

2. 컴포넌트 기반

3. 범용성 (다양한 곳에서 활용 가능)

 

 

1. 선언형

리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 

*개발에서 선언(명시적)이라는 뜻은 코드를 자세히 분석하지 않고도 코드의 의미를 분명히 알 수 있게 작성하는 방식을 의미한다. 

 

queryselector로 HTML 내의 코드를 받아와서 JS 파일에서 개발하는 환경은 직관적이라고 볼 수 없다. 

반면, 리액트는 JSX라는 HTML과 JS가 결합한 문법을 기반으로 명시적으로 코드를 작성해서 직관적으로 코드를 짤 수 있다. 

 

다른 기술을 한 곳에 모아서 볼 수 있다는 장점으로 웹 어플리케이션의 모습과 기능을 상상하게 할 수 있다. 

 

---

 

2. 컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 

컴포넌트를 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 

 

const Cart = ({items}) => (
	<section className = 'cartContainer'>
    	<h1>장바구니</h1>
        <SelectAllCheckBox />
        <div className="itemContainer">
        	{items.map((item) => <Item item = {item}/>)}
        </div>
    </section>
)

➥ 장바구니 리스트와 제품에 관련된 코드

(컴포넌트로 분류되어 있다. )

**대소문자와 반복수를 유의깊게 살펴보자!**

 

 

컴포넌트 기반으로 개발시 장점

1. 컴포넌트 간의 의존성이 없어져서 독립적으로 작동한다. 

2. 이전에 작성된 기능을 구현할 때, 해당 컴포넌트를 재사용할 수 있기 때문에 효율적이다. 

 

따라서 우리는 컴포넌트에  (각 기능 작동 자체에 ) 집중해서 개발할 수 있다. 

또한 어떤 기능이 작동하지 않을때, 그 기능을 구현하는 컴포넌트의 코드를 보고 에러를 찾을 수 있어서 유지보수가 편하고, 유닛 테스트*하기에도 편하다. 

 

 

*유닛테스트란????

메서드를 테스트하는 또 다른 메서드라고 한다. 

유닛테스트는 버그를 줄이고, 코드 퀄리티를 높이기 위해 만든다. 

 

 

궁금궁금?! 추가학습 필요

컴포넌트와 클래스가 비슷한 개념인가?

둘 다 기능을 위해 묶어놓은 것이 비슷하니까!

더 알아보기!

---

 

3. 범용성 (다양한 곳에서 활용 가능)

 

리액트는 자바스크립트 라이브러리이다. 

기존에 다른 자바스크립트 프레임워크로 제작된 웹 어플리케이션에 리액트를 추가해서 개발할 수 있다는 의미이다. 

 

리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있고, facebook에서 관리되어 안정적이고, 가장 유명하고, 리액트 네이티브(리액트의 형제 격)로 모바일 개발도 가능하다. 

 

 

잘 짠 코드의 기준은! 코드를 보고, Application을 떠올릴 수 있는지에 대한 여부이다.