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