[react] 폴더구조 구현 - recursive component
*리액트 프로젝트의 폴더구조에 관한 것이 아닌, 리액트로 폴더구조를 구현하는 방법에 관한 글입니다. 폴더구조(Folder structure) 데이터 폴더구조라 함은 폴더와 파일로 이루어진 데이터의 집합입니다. 운영체제의 폴더 탐색기를 생각하시면 됩니다. 데이터의 기본적인 모양새는 다음과 같습니다. type File = { id: String, type: String, name: String, value: String, }; type Folder = { id: String, type: String, name: String, children: Array, }; 이 구조에서의 파일과 폴더의 차이점은 파일은 하위에 더 이상 출력할 데이터가 없고, 폴더에는 children 프로퍼티에 다시 파일 혹은 폴더로 이루어..
2024. 3. 5.
[JAVASCRIPT] this가 가리키는 객체 (메서드, 함수, 화살표 함수에서)
this 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서의 this는 전역 객체를 참조합니다. 전역 객체란 node 환경에서는 global 객체, 브라우저에서는 window 객체입니다. 2. 함수 안에서의 this 여기서도 여전히 전역 객체를 참조합니다. 함수 블록 안이라고 해서 컨텍스트가 좁혀지지 않습니다. function someFunc() { console.log(this) } someFunc(); // Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 단, 엄격모드(use strict)에서는 함수 안에서의 this가 undefined입니다. 'use strict'..
2024. 1. 5.
[react] JSX 배열 반복문 렌더링 - for, map, forEach
리액트에서 JSX 반복 렌더링 JSX와 중괄호 반복문을 사용하기 위해서는 JSX안에서 중괄호({}, curly braces)를 써야 합니다. JSX는 리액트 컴포넌트의 return문으로 반환되는 코드입니다. javascript를 확장한 문법으로, React에서 UI를 구현하는 데 사용됩니다. (HTML과는 다릅니다) function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; return {weekArr[0]}; } 이 위치에서 반복 렌더링을 하기 위해 사용이 가능한 방법과 그렇지 않은 방법을 살펴보겠습니다. 1. for 문❌ return문 안에서는 아래처럼 for문을 사용하면 안 됩니다. // wrong funct..
2024. 1. 4.
