리액트 공부 시작
기초부터 차근차근 쌓자!
CRA
yarn create react-app 파일 이름
cd 파일 이름
yarn start
- public > index.html
- SPA이기 때문에 서버로부터 페이지를 index.html하나만 받고 나머지는 동적으로 계속해서 그려지기 때문에 SEO(서치엔진이 html을 찾아서 검색에 걸리게 한다)에 약하다고 했다.
파일을 해석해보자
public > index.html이 말하고 있는 내용
<div id="root"></div>-
<div>태그가 하나 있는데 id가 root인 친구가 있다. -
이 root인 친구가 뭐냐면 src > index.js 로 가서
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);- id가 root인 친구를 getElementById로 찾아서 creatRoot를 해라.
- ReactDom을 이용해서 리액트 관련된 화면들을 만들어라.
- 그리고 render(화면에 그리는 것)를 해라.
- App이라는 것은 아까 수정했었던 src> App.js 파일을 가리키는데, 결국 App.js가 우리의 플레이 그라운드라는 것을 말한다!
import "./App.css";- . /는 상대 경로(relative path)인데 폴더가 많아지면 관리가 어렵다. (././././ 같이 써야 함)
- 절대 경로 지정하기 : root경로에 jsconfig.json 파일을 하나 만든다.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
//src 폴더 밑에 있는 것들은 다 절대 경로로 써달라는 뜻- App.js
//import "./App.css";
import "App.css";./ 없이도 경로 설정이 가능해진다.
리액트 컴포넌트
- UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다.
- 클래스형보다 함수형 컴포넌트를 더 많이 쓴다.
- 컴포넌트 밖에서는 내가 필요한 파일을 import 하거나 export default 라는 기능을 통해서 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.
부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
자식 컴포넌트 : 다른 컴포넌트 안에서 품어지는 컴포넌트
Props
컴포넌트끼리의 정보교환 방식
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.
1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 → 자식방향으로만 흐른다.(단방향)
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
