오늘의 나는 무엇을 배웠을까?
1. 컴포넌트를 사용하는 이유
- 컴포넌트는 부품이라는 뜻
- React 개발은 컴포넌트를 잘 개발하는 것
- UI 수정, 재사용에 용이하고 코드 가독성이 높아진다
- 이에 따라 유지보수가 쉽다
- 일을 쉽게 나눌 수 있어 협업에 장점이 있다
2. State 끌어올리기 (Lifting)
동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이 때 가장 가까운 공통 조상으로 state를 끌어올려 사용하는데, 이를 State Lifting 이라고 한다.
이를 활용하면 여러 컴포넌트들이 공유된 state를 가지게 되고 항상 동기화 된 상태를 유지할 수 있다.
3. React가 렌더링하는 방식
가상 DOM (Virtual Dom)
UI의 가상 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리를 통해 실제 DOM과 동기화 하는 개념으로, React의 선언적 API를 가능하게 하는 접근방식이다.
React에게 원하는 UI 상태를 알려주면 DOM이 그 상태와 일치하도록 한다.
State가 변경되면, 실제 DOM과 생성된 Virtual Dom을 비교하여 바뀐 부분만 찾아내어 실제 DOM 노드에 반영을 한다. 때문에, 최소한의 렌더링만 할 수 있게 되는 것이다.
- 장점
- 직접 DOM 노드를 신경쓸 필요가 없어 단순하고 깔끔한 코드 작성에 도움이 됨
- 변경사항을 적당히 모아 처리하기 때문에, 한정된 브라우저 자원을 효율적으로 활용할 수 있음
재조정 (Reconciliation)
컴포넌트의 prop 또는 state가 변경될 때 직전에 렌더링 된 요소와 새로 생성된 요소를 비교하여 그 차이를 DOM에 업데이트 하는 과정을 재조정 이라고 한다.
4. 디자인 적용하기
4-1. 이미지 파일
import exImg from "./assets/exImg.jpg"
function Example() {
return <img src={exImg} alt="example image" />;
}
export default Example;위와 같이 파일을 import 구문으로 불러오고, 불러온 주소를 src 속성에 넣어준다.
4-2. 인라인 스타일
HTML과 달리 React에서는 인라인 스타일을 문자열이 아닌 객체형으로 사용한다. CSS 속성 이름을 프로퍼티 이름에, CSS 속성 값을 프로퍼티 값으로 작성하고, - 로 연결된 속성 이름이 있다면 카멜 표기법으로 바꿔 작성한다.
const style = {
color: "red",
backgroundColor: "blue",
};
function Example() {
return (
<div>
<div style={style}>Hello!<div>
</div>
)
}4-3. CSS 파일 불러오기
import 구문으로 파일을 불러오고, from 없이 사용한다.
import "./example.css";
//4-4. 클래스네임 사용하기
CSS 파일에 정의된 클래스명을 className prop에 문자열로 넣어준다. 재사용성을 위해서 부모 컴포넌트에서 prop을 받아도 좋다.
import "./example.css";
function Example({ className }) {
const classNames = `ex1 ${className}`; // 클래스명 추가 시 반드시 띄어쓰기(빈 공백) 필요
return <div className={classNames}> Hello! </div>
}5. 빌드
빌드란, 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 그 결과를 말한다. 빌드 과정을 도와주는 도구를 Build Tool 이라고 부른다.
- esbuild
- Vite
- Webpack (번들러, 빌드 과정도 포함)
등등 다양한 Build Tool이 있다.
6. 사용하는 명령어들
- 프로젝트 생성
npm init react-app . // 현재 디렉토리를에 생성npm create-react-app 프로젝트명- 개발 모드 실행
npm start (npm run start)- 실행 중인 서버 종료
ctrl + c- 개발된 프로젝트 빌드
npm run build- 빌드된 프로젝트 로컬에서 실행
npx serve build내일의 나는 무엇을 해야할까?
- React로 데이터 다루기 강의 수강
- 멘토링 질문 달기
- 팀 데일리 미션 출제, 답변
