고정 헤더 영역
상세 컨텐츠
본문
세팅하기
create-react-app 사용해서 설치하기
✅ npx create-react-app 명령어 사용
cf) git에 node_modules 폴더는 올리지 않는 것이 낫다. (크기도 크고 파일도 많음)
package.json 만 올리면 된다! → package.json에 있는 걸로 설치하면 되니까
프로젝트 실행하기
npm run start 사용 (npm run start == npm start)
start 명령어가 실행되면 해당 화면을 확인할 수 있다!
npm start 등의 명령어는 package.json 내의 script 쪽에 명시되어있다.
✅ “react-scripts start” : 개발모드로 프로그램 실행
✅ “react-scripts build” : 실제 배포모드로 만들어줌
✅ “react-scripts test” : 테스트
✅ “react-scripts eject” : 내부설정파일을 꺼내는 역할. 웹팩이나 바벨 설정 변경시 사용
CSS
class 대신 className을 사용하는이유
✅ class는 JS의 예약어이기 때문에 className을 사용한다.
컴포넌트와 JSX
함수형 컴포넌트란?
✅ 함수로 만들어진 컴포넌트를 뜻한다.
✅ 모든 컴포넌트는 대문자로 시작된다.
✅ 함수는 JSX를 리턴한다(JSX : JavaScript XML)
CSS 오버라이딩
✅ 파일명이 app.css라고 해서 App이라는 컴포넌트에만 해당하는 건 아니다!
✅ CSS 파일은 각 컴포넌트에 종속되지 않는다.
✅ head 부분에 위치하기 떄문에 전 페이지에 영향을 미칠 수 있다.
→ .box처럼 같은 className을 가진 경우 오버라이딩이 될 수 있다.
각 컴포넌트에 특화된 css를 작성하는 방법
✅ 파일명 앞부분은 보통 컴포넌트에 맞춰서 생성한다.
✅ 일반적으로 module.css는 항상 붙여준다.
css를 적용할 땐
✅ import 를 해줘야한다.
✅ className={styles.box} 처럼 선언해줘야한다.
이 방식의 장점
✅ 2번 사진에서 볼 수 있듯이 동일한 이름으로 작성해도 이름 뒤에 해시 값이 들어가기 때문에 중복의 염려가 없다. → 편리함
✅ CSS 크기가 커지면 네이밍과 상속, 오버라이딩에 대해 신경을 써야하는데 이런 방식으로 하면 그런 문제를 해결할 수 있다.
✅ CSS 파일이 글로벌로 관리되는 게 아니고 컴포넌트 단위로 관리되는 것
useState
fruit 변수와 버튼 클릭시 fruit 변수가 변하는 코드를 작성해보자!
실제로 버튼을 클릭하면 fruit 변수의 값이 변하는 것을 콘솔창에서 확인할 수 있다.
→ DOM 업데이트는 이루어지지않기때문에 화면에 노출된 Apple 은 변하지 않는다.
DOM 업데이트를 해주는 자바스크립트 코드를 추가해봤다.
화면에 노출되는 fruit 변수의 값이 변하는 것을 확인할 수 있다.
여기서 fruit는 단순히 변수일 뿐 state가 아니다.
✅ fruit 변수는 컴포넌트가 관리하는 state가 아니기때문에 값이 변해도 리액트가 인식하지 못해 UI 업데이트가 되지 않는다.
useState를 사용하는 방법
✅ useState는 사용할 때 import 필수!
✅ 동일한 컴포넌트여도 state는 각각 관리된다.
Hello 컴포넌트를 세개 선언하고 화면에서 테스트 해본 결과 같은 컴포넌트여도 선언을 여러번 해주면 state가 각각 다르게 관리됨을 확인할 수 있다.
Reference
유투브 코딩앙마님의 React.js 강좌를 보고 정리한 글입니다.
https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-
React js 강좌
www.youtube.com
'Programming > React' 카테고리의 다른 글
| 상태 관리 라이브러리 - Recoil (0) | 2023.07.04 |
|---|---|
| 상태 관리 라이브러리 - Redux (0) | 2023.07.04 |
| [React] 미니 블로그 만들기 (0) | 2023.06.05 |
| [React] 기초 정리 - 여러 개의 input 상태 관리하기 (0) | 2023.05.30 |
| [React] 기초 정리 - 조건부 렌더링 (0) | 2023.05.30 |
댓글 영역