기술 창고(231)
-
[React] 컴포넌트 Mapping 데이터
이전까지는 동일한 태그에 각자 다른 정보를 넣으려면 Props를 일일히 다르게 지정해서 컴포넌트를 호출해야 했습니다. 규모가 작은 프로젝트 같은 경우에는 괜찮겠지만 이외의 프로젝트 규모에 따라서 기존의 방식대로 하는 것은 비효율적이라고 볼 수 있습니다. 이를 보완하기 위해 Mapping 시키는 다른 방법이 있으므로 이번에는 그 방법에 대해서 알아보겠습니다. 기존의 방식 import React from "react"; import Card from "./Card"; import contacts from "../contacts"; function App() { return ( My Contacts ); } export default App; Card 컴포넌트를 수동으로 반복 호출하는 다소 비효율적인 방식이라..
2023.07.25 -
[React] React DevTools 와 컴포넌트 세분화 구성
이번에는 React App을 좀 더 작은 구성 요소로 분리하면서 개발자 도구(DevTools)로 확인하는 과정에 대해서 알아보겠습니다. 그 과정에서 반응하는 개발자 도구(DevTools) 사용법을 배워서 이 모든 구성 요소를 디버그하고 관리할 수 있습니다. 예시 코드 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); contacts.js const contacts = [ { id: 1, name: "Beyonce", imgURL: "https://blackhistorywall..
2023.07.25 -
[React] Props
Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다. 태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다. 이것을 보완해서 작성해보겠습니다. 반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다. 렌더링 함수 쪽에 보면 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다. 하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다. 따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합..
2023.07.21 -
[React] React App 프로젝트 로컬 환경 생성 세팅 (Window)
윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다. 1. 노드를 설치 2. 개발 툴 설치 (Visual Studio 등..) 3. React App 생성 4. App을 실행 (1) 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 사이트에서 최신 버전의 node.js 를 받아줍니다. LTS 버전을 다운받아 설치하면 됩니다. (2) 개발 툴 설치 (Visual Studio Code) https://code.visualstudio.com/download Download Visual St..
2023.07.21 -
[React] Import, Export 사용법
React 를 컴포넌트로 관리하게 될 때 컴포넌트로 만든 js 파일이나 렌더링할 내용이 있는 jsx 파일을 사용하려면 export를 해주어야 하고, 그 컴포넌트를 사용하는 파일에서는 import 를 시켜주어야 합니다. 이 export와 import를 사용하는 방법을 조금 더 알아보겠습니다. 단일 Export / Import math.js const pi = 3.1415962; export default pi; index.js import React from "react"; import ReactDOM from "react-dom"; import pi from "./math" ReactDOM.render( {pi} , document.getElementById("root") ); 컴포넌트인 math.js ..
2023.07.21 -
[React] React Component (컴포넌트)
React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다. 하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다. 단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다. 이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다. 기존의 React 파일 구성 index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite..
2023.07.20