공부하며 깨우친 생각 정리
물론 시간 안에 고양이 사진첩 만들기는 성공했다.
하지만 ...
내 코드는 DOM 사용을 극대화 한 코드였다.
아직 버리지 못한 "만들기만 하면 된거지 뭐" 이 생각은 여전히 나를 발전시키지 못하고 있었다.
문제의 지문 중 가급적 컴포넌트 형태로 추상화 하여 작성하라고 되어 있었지만
난 이것을 function으로만 나눠서 만든 것이었다.
한------------------------------심
물론 그렇다고 내가 class를 통한 oop를 알지 못했던 것은 아니었다.
알고 있지만 사용해본 적이 없는
그렇지만 항상 사용하고 있었던 것이었다.
우선 코드를 보면서 기억을 다듬고 정리해보자.
part . 1
<html>
<head>
<title>고양이 사진첩!</title>
<link rel="stylesheet" href="./src/styles/style.css" />
<script src="src/main.js" type="module"></script>
</head>
<body>
<h1>고양이 사진첩</h1>
<main class="app">
</main>
</body>
</html>
위 코드를 보면 뭐가 생각이 나는가 ...
자 여러분 아무것도 생각이 안난다면
지금 당장 자신히 만들었던 혹은 npx create-react-app를 하고
public 폴더로 들어가보자
// 이건 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/imageFile/icon_black.png" />
<script>
var Alert = ReactBootstrap.Alert;
</script>
<title>test</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>대충 이런 구조를 확인할 수 있을 것이다.
자 그럼 여기서 생각해야할 것은 저기 보이는 root에 컴퍼넌트들을 붙여주면 된다는 것이다.
part.2
나는 아니 우리는 이미 React가 어떤 구조인지를 알고 있을 것이다.
import App from "./App.js";
new App(document.querySelector(".app"));
import { request } from "./api/api.js";
import Nodes from "./components/Nodes.js";
import BreadCrumb from "./components/BreadCrumb.js";
export default function App($app) {
//저장소 state
this.state = {
... 생략
};
const breadCrumb = new BreadCrumb({
$app,
initialState: this.state.depth,
});
const nodes = new Nodes({
... 생략
});
this.setState = (nextState) => {
... 생략
};
const init = async () => {
... 생략
}
자 고양이 사진첩html app에 App function을 연결시켜주자
여기서부턴 이제 매우 쉽게 생각을 해야한다.
우린 이미 React를 통해 useState, useEffect, functional components을 수도없이 사용해봤을 것이다.
this가 무섭다고 난 몰라하지 말고 this빼고 보면 우리가 알던 것들이다.
part.2 : useState
this.state = {
isRoot: false,
nodes: [],
depth: [],
};
this.setState = (nextState) => {
this.state = nextState;
breadCrumb.setState(this.state.depth);
nodes.setState({
isRoot: this.state.isRoot,
nodes: this.state.nodes,
});
};이렇게하면 조금 더 쉽다
그래도 모르겠으면
let [state, useState] = [{
isRoot: false,
nodes: [],
depth: [],
} , (nextState) => {
this.state = nextState;
breadCrumb.setState(this.state.depth);
nodes.setState({
isRoot: this.state.isRoot,
nodes: this.state.nodes,
});
}]이렇게 사용하면 그냥 useState 만들어보리는 것이다.
part.2 : useEffect
자 이제 야매 useEffect를 만들어보자
위의 코드와
const init = async () => {
try {
const rootNodes = await request();
this.setState({
...this.state,
isRoot: true,
nodes: rootNodes,
});
} catch (err) {
throw new Error(err);
}
};
init();이 코드를 같이 쓴다면 그냥 useEffect다
마무리
사실 이쯤되면 알려줄 것도 없다.
물론 해설지에는 캐쉬도 알려주고 이것저것 알려주시지만
당장 react를 쓰며 익히 알고있었던 부분들이 생소하게 나와 당황하며
난 class를 통해서 oop하는 법 몰라!
Dom쓸래
하고 엉망으로 작성한 나 자신을 반성하며
"내가 푸는 것은 쉬운 것들이다. 그냥 쉽게 생각해라. 어려운 문제는 너한테 안온다."
라는 생각을 잊지말고 다시 발전해보자
나와같은 분들이 있다면 꼭 꼭 저걸 풀어보길
해설지 다 읽어보시길
정말 많은 생각과 발전을 할 것입니다.
