React 기초 - 생활코딩 리액트 2022 개정판

React.js

자바스크립트 라이브러리, node.js 환경에서 동작

 

index.js

입구, 즉 제일 먼저 동작

npx create-react-app .

현재 디렉토리에 리액트 프로젝트 생성

npm [run] start

개발을 위한 명령어, 개발 환경 구축

npm [run] build

빌드를 위한 명령어, 배포본 생성

npx serve -s build

build 폴더의 index.html을 서비스하는 웹 서버 실행
-> 접속 가능한 주소 선택하여 클릭
=> 개발 버전 X, 실제 서비스 버전 O

 

React란?

	개념	비고
React	사용자 정의 태그를 만드는 기술	리액트의 본질
Componenet	사용자 정의 태그	네이밍 룰: 대문자로 시작
Prop	컴포넌트의 속성	cf. HTML 태그 속성

 

React 효과

• 여러 태그들을 하나의 부품으로 만들 수 있다.
• 더 적은 복잡도로 소프트웨어를 만들 수 있다.
• 내가 만든 컴포넌트를 공유할 수 있다.
• 다른 사람들의 컴포넌트를 사용할 수 있다.
• 생산성이 향상된다.

 

Prop & State

	Prop	State
공통점	값이 변경되면 새로운 리턴값을 만들어서 UI를 변경
차이점	(함수 매개변수처럼) 컴포넌트에 전달, 컴포넌트를 사용하는 외부자를 위한 데이터	(함수 내 선언된 변수처럼) 컴포넌트 안에서 관리, 컴포넌트를 만드는 내부자를 위한 데이터

 

정리정돈의 핵심 == 그룹핑 -> 네이밍

 

 

 

출처: https://youtu.be/AoMv0SIjZL8