React 기초1 : React란?, 컴포넌트의 정의, JSX
by Steady On📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다.
그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다.
React : UI를 구축하는 JS 라이브러리
- 리액트는 여러 함수로 코드를 분리하고 해석하여 여러개의 컴포넌트로 나눠놓고, 우리가 필요할 때 짜맞춰서 전체 UI를 구축하는 것이다.
- HTML/CSS & JS보다 좀 더 간단히 구축가능
- 리액트가 하는 일은 실제 웹페이지에서 어떤 컴포넌트를 '추가, 업데이트, 삭제' 하는 것
컴포넌트
: 여러 개의 함수, 명령들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위
- 모듈이라고도 부른다.
- 컴포넌트의 장점
- 재사용 가능 - 반복을 피할 수 있게 해줌
- 우려사항 분리 가능
- 코드베이스를 작고 관리 가능한 단위로 유지하여 유지보수가 쉽게 만들어준다.
- 각각의 컴포넌트는 하나의 명확한 과제와 초점에 대해서만 집중한다.
- 컴포넌트는 함수로 정의되고, 반드시 단 하나의 return 값을 가진다.
리액트의 특징 : 선언적 접근방식
- 항상 원하는 최종 상태, 즉 목표 상태 또는 다양한 상황에 따라 다른 목표 상태를 정의하는 것이 아주 중요
- 컴포넌트는 결국 하나의 함수이고, html 코드를 return 해서 그 함수를 불러오면 해당 html이 화면에 나타나도록 하는 것
- 그래서 이 컴포넌트가 결과적으로 어떻게 보여지도록 할 것인지가 중요하다는 것
- 미리 다 만들어놓기 때문에 선언적 방식이라고 함
리액트 프로젝트를 시작하는 방법
프로젝트를 만들고자 하는 폴더에서 yarn create react-app 프로젝트명이라고 터미널에 명령어를 써주면, 프로젝트 폴더가 만들어지면서 기본 세팅이 된다. 그리고 해당 폴더로 이동해서 yarn start 하면 리액트 프로젝트가 구동되면서 브라우저에서 실시간을 변경사항을 확인 가능하다.
리액트 프로젝트 : 구성요소1. index.js
- localhost:3000에 접속할 때, 최초로 실행되는 파일.
// index.js
import ReactDOM from 'react-dom/client'; //ReactDOM 라이브러리 불러오기
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
/* ReacdDOM 객체를 가져와서 createRoot 메소드 실행
root라는 ID를 가진 요소를 선택해서 이 태그가 React 애플리케이션의 루트라는 것을 설정한다는 뜻
메인 React 애플리케이션이 렌더링 되는 곳이다.
../public/index.html을 열어보면 정규 html 태그가 작성되어 있고
<body>태그 안에는 <div id='root'></div> 밖에 없다. 이 div 태그 안에서 렌더링이 이루어진다. */
root.render(<App />);
/* 루트 객체에 div 태그 안에 뭘 렌더링 하라고 알려주는 코드
<App /> 언뜻 보기에 html코드와 유사하게 생겼다. 이런걸 JSX라고 부른다. */* JSX란?
JavaScript XML(eXtensible Markup Language)
* XML : 다른 특수한 목적을 갖는 마크업 언어*를 만드는데 사용하도록 권장하는 다목적 마크업 언어
* 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지 ex) HTML
- JavaScript를 확장한 문법
- JSX는 React 엘리먼트를 생성한다.(엘리먼트(element)는 컴포넌트의 '구성요소'이다.)
- 원래는 React.createElement()라는 React 객체의 createElement라는 메소드로 각각의 엘리먼트들을 만들어줬는데, 그걸 좀 더 편하게 읽고 쓸 수 있도록 만들어진게 JSX이다. - 리액트는 이 JSX로 쓰여진 코드를 변환해서 리액트 DOM에 렌더링한다. (rendering은 화면에 쓴다는 말!)
- 예전에는 JSX를 쓰기위해서는 모든 컴포넌트 파일마다 React를 import 해줘야 했지만, 지금은 자동으로 되기때문에
import React는 더이상 쓰지 않아도 된다. - JSX에서는 JS의 클래스를 만드는
Class키워드와의 충돌을 피하기 위해서 엘리먼트의 class를className으로 표기한다. - 또 각 엘리먼트에서 어디서든지 JS의 코드나 변수명 등을 삽입하고 싶을 때는
{, }를 사용한다.
마무리
리액트 프로젝트 내에서 작성된 코드들은 yarn start 프로세스가 실행되면, 코드를 확인하고 브라우저로 데려가진다. 그리고 브라우저 내에서 코드를 변환해서 화면을 작성하고, 브라우저에 보여준다. 이 변환된 코드들은 브라우저의 개발자 도구-[소스] 탭에서 확인 가능하다.
'Last Record(Web Develop) > React' 카테고리의 다른 글
| React 기초6 : key, 조건부 렌더링, 동적 스타일 (0) | 2022.08.24 |
|---|---|
| React 기초5 : 상향식 컴포넌트 통신 (0) | 2022.08.22 |
| React 기초4 : <Form>에서 받은 여러 <input>의 state 처리(양방향 바인딩) (0) | 2022.08.21 |
| React 기초3 : Event Listener & Handler, React와 DOM, state (0) | 2022.08.20 |
| React 기초2 : props와 children (0) | 2022.08.20 |
블로그의 정보
Roen의 iOS 개발로그
Steady On