티스토리 뷰
리액트는 무엇인가?
“컴포넌트”라는 개념에 집중이 되어있는 라이브러리
데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여 준다.
생태계가 넓고, 사용하는 곳도 많다.
개발자가 원하는 스택을 맘대로 골라서 사용 할 수 있다.
DOM기반으로 작동하는 페이지는 그때 그때 새로 뷰를 만들어버리라고 하면 성능적으로 엄청난 문제가 있을 것이다.
그래서 사용하는게 Virtual DOM
*Virtual DOM이란?
변화가 일어나면, 실제 브라우저의 DOM에 새로운걸 넣는것이 아니라,
자바스크립트로 이뤄진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 해서 변화가 필요한 곳에만 업데이트를 해줌.
DOM 변화를 최소화 시켜주는 역할을 한다.
(Vue에서도 사용한다.)
리액트 설치 및 사용
설치 npm install -g create-react-app : create-react-app은 리액트 앱을 만들어주는 도구
사용 create-react-app “폴더명” : create-react-app hello-react는 hello-react라는 리액트 폴더를 만들어준다.
cd hello-react
PORT=4000 npm start
==========================================================================================
컴포넌트에 해당하는 코드는 App.js에서 확인 할 수 있다.
import
무엇을 불러 온다.
import하는 것은 우리가 webpack을 사용하기에 가능한 작업이다.
- 컴포넌트를 불러올 때 import 클래스명 from ‘./App’ / 예) import App from ‘./App’
- 브라우저에 우리가 만든 리액트 컴포넌트를 보여주기 위해서는 ReactDom.render 함수를 사용
- ReactDom.render( 첫번째 파라미터=렌더링 할 결과물, 두번째 파라미터=컴포넌트를 어떤 DOM에 그릴지 지정);
*두번째 파라미터=컴포넌트를 어떤 DOM에 그릴지 지정 ← 해당 DOM은 public/index.html파일에서 찾아볼 수 있다.
예) ReactDOM.render(<App />, document.getElementById('root'));
JSX
Html과 비슷한 문법으로 작성을 하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜준다.
XML 형태의 코드 = Html과 비슷한 문법
JSX를 제대로 사용하기 위한 몇가지 규칙
- 태그를 열었으면 태그를 꼭 닫아주어야한다. input이나 br태그를 작성할 때 html에서는 안닫을 때도 있었는데 리액트에서는 반드시 닫을것!
- 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.
- 단순히 감싸기 위해 div를 사용하는게 맘에 안들면 Fragment로 감싸준다.!
But, Fragment를 사용하고 싶은경우 React를 inport해줄때 두번째 인자값으로 선언해주어야 한다.
const와 let
Const : ES6에 도입된 키워드로서, 한번 선언하고 바뀌지 않는 값을 설정할 때 사용!
예) const test=1 / test를 치면 1이 나옴 / test=2라고 하면 오류가남
Let : 바뀌게 될 수 있는 값
Style Css
리액트에서는 style을 객체 형태로 작성해야한다.
그리고 클래스를 설정하게 될 때에는 class대신 className을 사용한다.
예) <div className=“App“></div>