React - Intro

Hyeonseok Jeong·2022년 10월 3일
1

React

목록 보기
1/16

오늘은 React에 대해서 적어 볼려고 한다.
처음 배운 React는 이해가 어려워 복습차원에서 적어본다

먼저 React란

Javascript 라이브러리 이고 사용자 인터페이스 즉, UI를 만드는데 사용된다.

또한 React는 SPA로서 HTML문서 하나를 가지고 JSX 문법을 사용해 여러개의 컴퍼넌트들 안에 HTML문을 작성하여 연결하고, 연결된 컴퍼넌트들을 React에서 번역하여 브라우저에 보내어 웹사이트를 구성한다고 할 수 있다.

사용하는 이유는 최신의 다체롭고 복잡한 인터페이스를 쉽게 구축할 수 있다는 장점이 있어 현대에 이르러 많이 사용되고 있다.

  • HTML페이지의 요소들을 제어하기 위해 사용되나 페이지 전체를 React로 만드는게 일반적이다.

  • React는 컴포넌트 기반의 UI라이브러리 이다.

  • 컴포넌트에 중점을 두고 있고, 따라서 내장된 다른 기능들은 많지 않다.

  • 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활동할 수 있도록 해주는 다양한 기술들의 모음이다.

React - Import & Export

Export로 컴포넌트를 바깥으로 내보내어 Root 컴포넌트 또는 또다른 컴포넌트에서 Import 하여 해당 컴포넌트를 이용할 수 있다.
Export 할때 당시에 default값을 주어 Import 할때 명칭을 바꾸어 줄소도 있다.

명칭을 바꾸어 줄수 있는 이유는 default값은 해당 컴포먼트의 함수를 기본적으로 두겠다는 의미로 어떤 명칭이든 해당 컴포넌트를 가르키게 된다.

React 사용하는법

  1. node.js 설치
  2. npm 설치
  3. React Project를 실행할 폴더 생성&접근
  4. npx create-react-app [프로젝트 이름] 명령어를 통해 CRA 실행
  5. npm install 명령어로 package.json에 명시되어있는 패키지를 다운 (기본적으로 npx create를 실행할때 패키지도 다운&설치가 된다.)
  • React 작동방식
  • props 사용방식
profile
풀스텍 개발자

1개의 댓글

comment-user-thumbnail
2022년 10월 3일

글 잘보고 갑니다~

답글 달기