간만에 글을 작성한다.
사실 2차 팀프로젝트까지 전부 마무리 했는데, 스터디 프로젝트 하랴, 엘리스 팀 프로젝트 하랴 정신이 없어서 이제서야 블로그를 부랴부랴 정리하는 중이다.
반성합니다 ㅠㅠ,,,
스터디 프로젝트와 2차 팀프로젝트에선 백엔드를 다뤘기 때문에 리액트는 별도로 추가적인 공부와 토이, 팀프로젝트 경험이 필요할 것 같다.
프론트앤드 준비하면서 프론트의 꽃 리액트를 소홀히 하다니,,, 죽어 마땅하다.
여튼 엘리스 수료를 일주일 앞둔 지금부터라도 리액트 공부를 시작한다. 프로젝트 관련 회고는 리액트 관련 블로그 포스트를 좀 더 작성하고 작성예정이다.
React란?
-사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리.
SPA(singlePageApplication) 구축을 위해 React를 사용한다.
SPA가 뭐냐? - 간단하게 이해하자면 서버에서 계속 페이지를 요청하는게 아닌 페이지 하나에서 내용을 동적으로 변경 할 수 있도록 구현한 애플리케이션이다.
컴포넌트(Component)
-리액트를 개발하는데에 있어 독립적인 단위로 쪼개어 구현.
컴포넌트 단으로 쪼개어 페이지를 구성함으로서 데이터를 불러올 때 페이지가 새로고침 되는 게 아닌 데이터를 불러온 컴포넌트만 다시 구성해 재사용성을 높인다.
가상돔(Virtual DOM)
-가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념이다.
간단하게 이해하자면 현재 작성되어져있는 코드와 가상에서 구상된 코드를 비교해서 현재 작성되어있는 코드에 가상돔의 변경된 부분만 동기화해준다.
JSX
-자바스크립트 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공한다. HTML과 유사하게 작성이 가능하다.
React를 배우는 이유
생산성 / 재사용성
-Component와 Hook을 활용, 작은 단위의 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높인다.
풍부한 자료 / 라이브러리
-현재 React는 전 세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있다.
다양한 사용처
-단순한 웹 애플리케이션 뿐만이 아니라 한번 배운 React 지식을 이용해 React-Native에 적용하여 안드로이드, ios 애플리케이션등을 개발할 수 있다.
한국에서 프론트로 먹고 살려면 필수다.
-한국에서는 한가지 기술에 집중? 편향 되는 경향이 있기도 하고, 때문에 리액트를 사용하는 회사들이 대부분이다.
Create React App(CRA)이란
-React 프로젝트를 쉽게 생성할 수 있도록 도와주는 '보일러플레이트(Boilerplate)'
-수많은 React용 보일러플레이트 중 페이스북에서 직접 만들어 관리하는 CRA가 가장 많이 쓰인다.
-프로젝트 생성에 필요한 다양한 기능을 Command로 제공
Create React App의 장점
- 개발자가 온전히 ReactApp 개발에 집중할 수 있도록 한다.
-덜 중요한 코드는 노출x
-강력한 Command 지원 - 대부분의 브라우저에서 해석될 수 있도록 transcompile 지원
-Babel
-배포 시 번들링
-Webpack
React 시작하기
터미널에 npx create-react-app <파일명>
cd <파일명>
npm start
npx란?
npm 패키지를 일회성으로 내려받아 실행할 때 사용하는 명령어
디렉토리 구조
node_modules
-npm을 이용해 설치한 패키지들 모음
public
-정적인 파일들을 모아 놓는 곳
src
-리액트 개발을 위한 파일들을 모아 놓는 곳
.gitignore
-Git을 이용할 경우 불필요하거나 Git에 업로드하면 안되는 파일들을 무시할 수 있도록 하는 설정 파일
package.json
-프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일
README.md
-내 프로젝트에 관한 설명 작성하는 파일
라이브러리 설치 후 프로젝트에서 불러오기
import "패키지명"
-CSS나 import 하는 것 만으로 역할을 하는 라이브러리인 경우 패키지명을 바로 import
import something from "패키지명"
-기본적으로 패키지를 불러와 활용할 때에는 할당할 이름을 작성
import { a, b } from "패키지명"
-패키지 내의 일부 메서드나 변수만 가져올 때 구조분해를 통해 가져오는 것이 효율적
import * as something from "패키지명"
-패키지에 default로 export 되는 객체가 존재하지 않을 경우 *as 이름으로 불러올 수 있다.
JSX란?
-JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
-HTML과 비슷하게 생겼으나 JavaScript고 HTML과 다른 부분이 있음
-JSX는 Babel에 의해 Transcompile 된다.
JSX의 장점
-개발자 편의성 향상
-협업에 용이하고 생산성 향상된다
-문법 오류와 코드량 감소
JSX특징/ HTML과 차이점
-HTML 태그 내에 JavaScript 연산.
-class 대신 className을 사용한다.
-스타일은 object로 작성한다.
-닫는 태그가 반드시 필요하다.
-최상단 element는 반드시 하나만 사용한다.
Component란?
-React에서 페이지를 구성하는 최소단위.
-Component의 이름은 대문자로 시작해야한다.
-Class Component/ Function Component로 나뉜다.
-Controlled Component/ UnControlled Component.
Class Component와 Function Component
-초기 React의 Component는 모두 Class Componemnt였다.
v16부터 새로운 Function Component와 Hooks 개념이 발표되었으며
현재는 Function Component로 대부분이 사용중이다.
옛날에 작성해둔 코드는 Class Component인 경우가 아주 드물게 있다.
Component의 특징
<Component user={{name: "창현"}} color="blue">
<div>안녕하세요!</div>
<Component>컴포넌트에 Attribute에 해당하는 부분을 Props(Properties)라고 한다.
컴포넌트 안에 작성된 하위 Element를 Children이라고 하며 결국 props중 하나이다.
const Component = (props) => {
const { user, color, children } = props
return (
<div style={{ color }}>
<p>{user.name}님의 하위 element는?</p>
{children}
</div>
)
}위 코드는 상위 Element로 부터 전달받은 props를 활용하는 코드다.
이 컴포넌트의 자식요소 역시 props로 부터 값을 받아온다.
-컴포넌트끼리 데이터 주고받을 때는 Props.
-컴포넌트 내에서 데이터 관리할 때는 State.
-데이터는 부모 -> 자식으로만 전달할 수 있다.
너무 늦어버린건 아닌지..