안녕하세요! 저는 현재 패스트캠퍼스에서 벨로퍼트님의 React 강의를 듣고 있는 코린이 입니다!
개념 정리를 위해서 이렇게 작성하게 되었구요!
지금부터 해석은 제 개인적인 의견도 있다는 점 미리 말씀 드립니다!
React?
제가 주위에서 많이 들었던 React란!
Angular, Vue에 더불어 자바스크립 기반의 프레임워크이며 현재 가장 각광받고 있습니다!
지금까지 HTML, CSS, JS 등의 파일로 구분하여 프로젝트를 진행하였지만
UI를 구성하는데 있어 협업과 재사용성그리고 코드 분석이 어려운점이 많았으며
동적으로 웹 애플리케이션을 만드는데 힘이 들었는데요!
그 부분을 컴포넌트라는 개념으로 코드를 재조립 할 수 있도록 만들어
재사용은 물론 협업에서도 정말 많은 도움을 받을 수 있는것 같습니다!
이제야 React를 시작하기에 이 정도만 알고 집중해서 깊이 파고 들어 보겠습니다!
Class vs Function
React는 크게 Class형 컴포넌트와 Function(함수)형 컴포넌트가 있습니다!
이전에는 데이터의 관리 props와 state의 관리에 있어 Class형을 많이 사용하였지만
Function형에서도 Hooks가 생기면서 props와 state 등 상태를 관리 할 수 있게 되면서
차츰 Function형 컴포넌트를 많이 사용하고 있는것 같습니다!
클래스형 컴포넌트
항수형 컴포넌트
클래스와 함수형의 공톰점이라고 하면
1. import React from 'react';
: 이 부분은 React를 사용한다고 선언하는 부분이라고 보시면 됩니다!
그래서 처음 시작할 때 최상단에 작성을 해주며
이 후에 불러올 컴포넌트나 스타일 파일을 import 해주시면 됩니다!
- return
: return은 되돌려주다라는 의미로
현재 작성중인 컴포넌트를 다른 곳에서 불러올 때
return 부분에 있는 코드를 내보냅니다!
코드가 길경우에는 ()를 활용하여 묶어주시면 됩니다!
- export default 컴포넌트명;
: 이 부분도 컴포넌트를 외부로 내보내는 코드입니다.
위에 return은 컴포넌트 중에서 내보낼 Code를 가리킨다면
exprot default는 file 중에서 내보낼 Component를 가리킵니다!
index.js & App.js
index.js는 저희가 솔직히 따로 볼 일이 많이 없어요!
하지만 App.js를 위해서 간단하게 살펴는 볼거구요!
App.js가 저희가 가장 많이 볼 컴포넌트라고 할 수 있습니다!
index.js도 다른 컴포넌트 파일과 마찬가지로 import React from 'react';를
선언하여 React를 사용할 수 있도록 준비를 하구요!
ReactDOM은 브라우저 상에 리액트를 보여주기 위해서 불러오는 부분입니다!
React에서는 DOM 특히 Virtual DOM의 개념이 정말 중요한데요!
React는 싱글 쓰레드를 활용하여 개발하기 때문에 브라우저에게 큰 부담으 줄 수 있습니다!
그렇기에 Virtual DOM 가상돔을 활용하여 실제로 적용하기 전에 적용을 해보고 나서
DOM으로 전달을 하여 여러모로 부담을 줄일 수 있다라고 볼 수 있습니다!
그럼 ReactDOM.render(, document.getElementById('root')); 코드는
document 페이지에서 id가 root인 부분에 App.js를 사용하겠다라고 볼 수 있습니다!
이 부분에서 document 페이지는 public 폴더안에 있는 index.html 입니다!
당연히 마찬가지로 import React from 'react';을 호출해주시구요!
function 컴포넌트명() {
js문법
return(
jsx문법
)
}JS 공부를 해보신 분들에게는 크게 어렵지는 않을 내용입니다!
저는 개인적으로 파일명과 내보낼 컴포넌트명은 동일하게 사용해주는게 편하더라구요!
그리고 jsx문법은 HTML문법과 정말 유사하지만 조금씩의 차이는 있습니다!
이 부분은 차근 차근 알아보도록 할거구요!
내가보기에는 HTML 코드인데 왜 jsx라고 하는냐하면
그거는 jsx코드가 babel을 통해서 해석되기 때문이죠!
너무 깊게 생각은 아직까지 필요없습니다!
이제 return()부분에 컴포넌트를 계속 붙여줄 예정 입니다!
import React from 'react';
improt Hello from './Hello';
function 컴포넌트명() {
js문법
return(
<Hello/>
<Hello/>
<Hello/>
<Hello/>
)
}이렇게 말이죠!
App.js를 사용하는 부분도 앞으로 여러분들이 컴포넌트를 사용하면서 익숙해 지실겁니다!
저는 공부한 부분을 리뷰하는 형식으로 작성하기 때문에 부족한 점 이해해 주세요~!
그럼 오늘도 파이팅 입니다!
