React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 6 (React)

본격적인 리액트 사용

이제 필요한 데이터를 받아오는 법은 알았겠다. 본격적으로 리액트라는 것에 대해서 적어보려 한다.

리액트, React JS는 최근 많은 기업들이 사용하고 있는 자바스크립트의 대표적인 라이브러리이다.

리액트는 페이스북에서 만든 Javascript 라이브러리이며 특징으로는 크게 2가지를 들 수 있다.

 

리액트의 특징

1. SPA를 구현하는 데에 용이하다.

2. 모듈형 개발을 기본으로 한다.

3. 활성화 된 커뮤니티

 

여기서 SPA(Single Page Application)란 페이지를 이동할 때마다 서버에서 데이터를 새로 받아오는 것이 아니라 우선 Vitrual DOM을 생성 한 뒤 DOM과 비교해 변경되는 곳만 부분적으로 리랜더링을 하기 때문에 웹페이지의 사용성에 도움을 준다. 

쉽게 말해 모바일 어플리케이션 사용 중 메뉴를 이동할 때 부드럽게 화면이 전환되는 것을 떠올리면 이해하기 쉬울 것이다. 실제 리액트로 만들어진 사이트를 개발자 도구로 관찰해보면 html의 변화하는 요소만 하이라이팅되는 것을 확인할 수 있을 것이다.

 

또 하나의 특징인 모듈형 개발은 중복되는 요소를 만들어 놓고 여러번 재사용하는데에 유용하며 기능별 나눠져 있는 파일을 유지관리 하는데에도 도움이 된다.

 

마지막으로 거대한 커뮤니티를 들 수 있다.

신기술을 익히고 그것이 발달하는 데에 커뮤니티의 규모는 꽤나 많은 영향을 미친다. 사용자가 많을수록 정보공유가 활발하고 이에 따라 활용도와 발전이 원활하게 이루어진다.

 

리액트의 문법

JSX

리액트는 JS의 확장 문법인 jsx를 사용한다. 이는 나중에 번들링을 할 때 바벨이 js로 변환시켜 주어 작동하게 된다.

jsx의 문법은 쉽게 말하면 html과 Javscript를 합쳐놓은 문법으로 두가지 문법을 한번에 처리할 수 있다는 장점이 있다.

const App = () => {
  return(
    	<div>
       	  Hello World!
        </div>
  )
}

return은 꼭 하나의 최상위 태그로 묶여 있어야 하는 규칙이 있기에 사용시 주의해야 한다.

이렇게 만든 jsx파일이 바벨을 통해 js로 변환되어 html을 구성하게 된다.

 

클래스형과 함수형

리액트의 문법에는 클래스형과 함수형이 있다. 초기 리액트에서는 클래스형으로 개발을 하여야 했고 이 후 리액트 훅(Hook)을 지원하게 된 16.8v 이 후 공식문서에서도 함수형 문법을 권장하는 것을 볼 수 있다.

하지만 리액트 사용자라면 기존에 클래스형으로 개발된 사항을 다루기 위해서 문법을 알고 있는 것이 좋다.

 

클래스형과 함수형은 다음과 같은 특징이 있다.

 

클래스형

- class를 사용함

- 선언 시 extends Component 를 붙여줘야함

- class는 render()함수를 꼭 써야함

- class형이기에 변수 사용 시 this를 사용함

- componentWillMount, componentDidMount, componentDidUpdate, componentWillUnmount 등 lifeCycle 관련 기능 사용 가능

 

함수형

- function을 사용함

- this를 사용하지 않음. 변수 선언 시 편리함

- 함수 선언하듯이 그냥 선언하면 되니까 편함.

- lifeCycle을 사용하지 못함

- 대신 Hook을 이용함. useEffect로 lifeCycle 기능 관리.

 

내가 직접 느끼는 바로도 함수형 문법은 훨씬 선언하기가 편리하다. 클래스에서는 붙여줘야 했던 this를 생략할 수 있고 props 또한 함수에 매개변수를 전달 하듯이 작성하기에 굉장히 익숙한 감이 있다. 따라서 익히기에도 훨씬 수월한 느낌.

 

lifeCycle관련 정보는 제로초님의 게시글이 정말 잘 정리해 놓으신 것 같다. 

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

(React) React의 생명 주기(Life Cycle) - 라이프사이클

 

기본적인 설명은 이정도로 마치고 본격적으로 프로젝트에 관한 이야기로 넘어가보자.

프로젝트를 구성해보자!

옛날 에디슨은 이런말을 한적이 있다고 한다.

'나에게 저기 보이는 나무를 베는대에 10시간이 주어진다면 9시간을 고민하고 베는대에 1시간을 사용하겠다.'

그렇다. 무슨 일이든지 무작정 하기보단 전략을 짜고 계획하는 것이 그만큼 중요하다는 말이다.

그렇기에 프로젝트를 시작하기에 앞서 우리는 전략을 짜야한다.

html을 구성할 때 홈페이지를 어떤 태그로 나누어 구성할 지 미리 생각하는 것처럼,

React에서도 컴포넌트를 어떻게 구성할지 생각해야한다.

그러면 전에 썼던 글을 토대로 컴포넌트를 나누어 보자.

 

내가 나누어본 컴포넌트!

나는 이렇게 나누어 보았다.

결국 필요한 컴포넌트는 모든 모듈과 state를 관리할 App을 시작으로 Search, Items, SelectedItem, Resutl, Card 컴포넌트들이 필요하다.

또한 컴포넌트의 구조는 다음과 같이 되겠다.

App

- Search

- Items

- SelectedItem

- Result -> Card가 여러개

 

Component 파일은 보통 src > Components 폴더 안에 저장을 하여 관리한다.

또한 CSS module을 사용한다면 각 컴포넌트별로 폴더를 만들어 CSS와 함께 묶어 더 편하게 관리 할 수 있다.

이런식으로 깔끔하게 관리하자!

아쉽게도 이번 프로젝트는 다 완성하고 나서야 깔끔하게 파일을 정리하는 법을 알게되어 하루 날 잡고 정리를 해봐야겠다는... 정리되면 바로 캡쳐떠서 올리도록 하겠다. 

대신 다른 프로젝트의 폴더 구성을 캡쳐해서 올려놓았다.

 

 

마무리

이렇게 기본적인 프로젝트 구성 설정하는 법을 적어보았다. 사실 이후에 html, css를 짜는 것은 거의 똑같다고 생각한다.

다만 세상은 그리 녹록치 않다. 리액트에는 아직 배울것이 많이 남아있다는...

앞으로 자주 쓰이는 기능들을 몇개만 써보자면

- state관리

- api로 받아온 정보 나열하기(은근히 오류가 많이 났던 곳임)

- Hook, Custom Hook

- 그때 그때 발생하는 예외, 버그처리 등등

 

그래도 시작이 반이라고 했던가. 벌써 반이나 왔다고 생각하며 천천히 배워가면 금방 나의 것으로 만들 수 있을것이라 생각한다.

다음 글은 useState를 이용한 state관리와 props에 대해 글을 작성해 보겠다.