Search
Duplicate
🖥️

우리는 왜 React를 공부해야하는가 ?

간단소개
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
React
Javascript
프론트엔드
태그
개발지식
Scrap
8 more properties

학습목표

React의 장점 느끼기
Figma를 통해 표현하고자 하는 것을 시각적으로 만들어보기

리액트 설치하기

리액트는 Node.js 기반
BUT 리액트를 사용하기 위해 Node.js가 반드시 필요한 것은 아님
Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있음
Node.js 설치할 때 NPM(Node Package Manager)이 같이 설치됨
→ NPM을 통해 리액트 개발에 필요한 모듈들을 다운받아 사용 가능
Node.js가 있으면 Babel(컴파일러 도구)을 추가로 다운받음
Javascript 대신 JSX 사용 가능 (JSX에 대한 자세한 내용은 아래 참고)
자바스크립트 ES6문법을 ES5로 변환하는 기능

리액트란?

웹 프레임워크, 자바스크립트 라이브러리 중 하나
UI를 만들기 위해 사용

리액트를 사용하는 이유

컴포넌트

Props

State

기본 훅

바닐라JS vs 리액트

1.
코드의 일관성
바닐라JS(프레임워크X) 등의 순수개발은 정해진 형태가 없음
→ 사바사 식의 코드가 만들어지기 마련
→ 협업할 때 어려워짐
2.
가상DOM
리액트
1.
render
2.
가상DOM에 결과물 저장
3.
원래DOM vs 가상돔DOM 비교
4.
달라진 점을 최종DOM에 저장
→ 메모이제이션과 유사 (변화된 부분만 연산, 속도up)
바닐라JS
→ 매번 통째로 변화되지 않은 부분까지 렌더링 (불필요한 작업)
3.
컴포넌트
JS에도 class를 지원하여 컴포넌트 호출 가능
BUT 리액트 컴포넌트들은 <Card />를 통해 반복을 줄일 수 있음
리액트는 손쉽게 view를 컨트롤할 수 있도록 제작됨

추가적으로 배운 것들

src/index.js
함수/클래스 내부에서 css 적용하기 vs 외부에서 css 적용하기
classclassName
바닐라js의 addEventListener을 리액트에서 어떻게 작성할까?
input 태그로 value 값을 받아와서 저장하는 경우
props.children
useRef

참고 자료

리액트 설치하기
리액트란?
바닐라JS vs 리액트
추가적으로 배운 것들
피그마 사용법
리액트 폴더 구조