$$config title: [React] React란? 개념 정리 keywords: - IT - React - 개념 - 정리 $$ # React가 뭔가요? - ![원본이미지](https://velog.velcdn.com/images/kim-jaemin420/post/088bbdd3-3c5c-4520-b250-4e67da4e368b/%E1%84%85%E1%85%B5%E1%84%8B%E1%85%A2%E1%86%A8%E1%84%90%E1%85%B3.png) React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다. 이렇게 특정 부분을 나누어 개발하는 방법론을 *MVC 패턴*, *MVVM패턴* 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다. # React의 특징 React.js를 처음 배우면 React.js의 특징으로 다음과 같은 말을 볼 수 있다. - React는 선언형이다. - React는 컴포넌트 기반으로 재사용성이 뛰어나다. - React는 Virtual DOM(가상돔)기반으로 가볍다. - React 컴포넌트는 state와 props 을 가진다. 우리는 여기에서 다음의 키워드를 얻을 수 있다. 선언형(Declarative), 컴포넌트(Component), 재사용성(Reusable), Virtual DOM(가상돔) 내 생각에 React.js의 본질은 위의 키워드로 모두 설명할 수 있다. 각 키워드들에 대해서 알아보자. # React - Declarative - [명령형 Imperative 프로그래밍](https://github.com/funfunStudy/study/wiki/%EB%AA%85%EB%A0%B9%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EA%B3%BC-%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EB%B9%84%EA%B5%90) 소프트웨어 공학에서 자주 접하게 되는 개념은 패러다임(Paradigm)이다. 즉, 프로그래밍을 어떻게 할 것인가 하는 생각에 대한 논의가 활발하게 이루어진다. 이 중 리액트를 하면 자주 접할 수 있는 패러다임이 선언형 Declartive 프로그래밍과 명령형 Imperative 프로그래밍이다. 이 둘의 차이점에 대한 설명은 좀 더 잘 설명된 글 링크를 남기며, 리액트의 선언적 성격을 보도록 하자. 리액트는 선언형 성격에 맞게 컴포넌트(원하는 결과, 뷰)를 얻기 위해 jsx 문법을 통해 구현한다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않는다. (예를 들어, document.createElement나 혹은 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부에 대한 알고리즘을 구현하지 않는다.) 이와 같은 선언형 특성은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해준다. # Component Based Development - [컴포넌트](https://mommoo.tistory.com/55) 우리는 Component 단위로 개발을 해야한다. 컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다. - 독립적인 코드 블럭(HTML + CSS + Javascript) - 중복되는 키워드를 하나의 컴포넌트로 표현하고 싶다.(이것을 이룬게 react이다.) - 작업의 단위 = 컴포넌트 - ![원본이미지](https://user-images.githubusercontent.com/61978339/101710656-454c3780-3ad5-11eb-8d77-89c13245b33a.png) HTML element와 컴포넌트를 비교해서 살펴보자. 먼저, ```

``` 와 처럼 컴포넌트는 내가 지은 이름으로 태그를 만들 수 있다. 또, img태그에서 src를 설정해준 것처럼 컴포넌트에서도 name을 Mark라고 설정해주었다. img에서는 이미지 주소를 바탕으로 이미지를 그린다, 컴포넌트에서는 해당 태그에 어떤 로직을 작성했는지는 모르겠지만 해당 태그안에서 Mark라는 이름을 사용해서 표현을 한다. HTML에서는 어트리뷰트라고 하지만 컴포넌트에서는 어트리뷰트라 하지 않고 prop이라고 한다. 외부에서 <내가 지은 이름1> 태그 안으로 어떤 데이터를 넣어주고 싶을 때 prop을 사용한다. 여러 개 있을 경우 props라고 한다. 이번에는 ``````에 주목하자. 버튼 태그 사이의 한글을 읽어들여 렌더링할 때 사용한다. 이는 컴포넌트에서도 마찬가지이다. 컴포넌트 태그 사이에 데이터를 담을 수 있는데 이는 children 이라고 한다. children도 props중 하나이다. <내가 지은 이름>은 prop을을 두개 받았다. ```js { prop={false}, children="내용" } ``` 이 객체 이름이 props 이다. 사용자 입장에서는 HTML element와 컴포넌트는 크게 다르지 않다. 그러나 ``````혹은 ```

게시글 상세