TIL024 | React 시작하기

React의 배경

웹사이트에 접속하여 할 수 있는 일이 점점 많아지면서, 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션(Web Application)라는 단어가 많이 사용되기 시작했다.

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 되는데, 그 중 한가지가 바로 React이다.

Library vs. Framework

라이브러리란 소프트웨어를 개발하기 쉽도록 모아놓은 기능들의 모음이라고 볼 수 있다. 사용 여부는 코드 작성자 선택 사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않는다.

프레임워크란 특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램이다. 어떤 프로그램을 쉽게 만들기 위한 요소와 룰을 제공해 줌으로서 소프트웨어의 생산성과 품질을 높이는 역할을 한다.

라이브러리와 프레임워크의 차이점은 자유도에 있다. 프레임워크를 사용할 떄는 규약들을 꼭 지키면서 개발작업을 하여야 한다. 하지만 라이브러리는 도구이기 때문에 사용여부를 본인이 원할 때 원하는 곳에 사용할 수 있는 자유가 있다.

React의 정의와 특징

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트를 사용하는 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다.

리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

Component

컴포넌트는 재활용 가능한 UI 구성 단위이다. React로 개발을 한다는 것은 마치 블럭을 조립해 성을 만드는 것과 같다. 웹 어플리케이션의 화면의 구성요소들을 컴포넌트로 나눌 수 있는데, 반대로 말하면 전체 웹 어플리케이션은 각 컴포넌트들이 결합해서 만들어 지게 된다고 볼 수 있다.

컴포넌트의 특징으로는

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.

JSX

JSX란 리액트에서 사용하는 자바스크립트 확장 문법이다. HTML과 아주 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있다.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다. 그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 한다.

references

https://medium.com/@RianCommunity/react%EC%9D%98-%ED%83%84%EC%83%9D%EB%B0%B0%EA%B2%BD%EA%B3%BC-%ED%8A%B9%EC%A7%95-4190d47a28f
https://blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html
https://engkimbs.tistory.com/673