RedMeta

[React] 리액트 디렉토리 구조

오늘은 간단하게 리액트를 이용해 코드를 짤 때 보는 디렉토리 구조에 대해서 알아보겠습니다. 딱 정해져 있는 디렉토리 구조는 없지만, 보편적으로 기능 또는 경로별로 그룹화 해서 디렉토리를 형성합니다. node_modules - CRA를 구성하는 모든 패키지 소스 코드가 들어있는 디렉토리 public 폴더 - index.html 파일이 있는 곳 - 가상 DOM을 위한 html vkdlf src 폴더 - 실제 작업할 폴더 - index.js 파일이 존재 - App.js는 현재 화면에 보여지고 있는 초기 컨포넌트 - apis 안에는 말 그대로 api들을 넣어 두는 곳입니다. 아래는 src 폴더안의 하위 폴더들 입니다. assets - 서비스에 사용하는 font와 image들이 들어 있다. 나의 자산 compon..
Coding/React 2023. 1. 16. 22:30

[React]클래스와 컴포넌트의 방식의 차이

React 클래스와 컴포넌트의 방식의 차이에 대해서 알아보겠습니다 리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있습니다 과거에는 클래스형 컴포넌트를 주로 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있습니다 어떤 것이 유용한지는 상황에 따라 다르므로 두 가지 방법에 대해 모두 다 잘 알고 있으며 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 해야겠습니다 함수형 컴포넌트 import React from 'react'; function App() { const name = '리액트'; return {name}..
Coding/React 2021. 1. 25. 00:04

React 설치하고 실행하기 - 페이스북, 인스타그램 만들기

오늘은 페이스북에서 개발한, 그리고 페이스북에서 사용되고 인스타그램에서도 사용되는 리액트를 설치하고 실행하는 방법에 대해서 알아보겠습니다 React는 유저 인터페이스를 만들 때 사용되는 오픈 소스 자바스크립트 라이브러리입니다 프런트엔드 개발자 사이에서 굉장히 많은 인기를 얻고 있어요 실제로 npm 패키지 다운로드 수는 react가 자바스크립트 라이브러리 중 1등입니다 그러면 이제 리액트를 설치해 볼까요? https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 기반으로 실행되기 때문에 먼저 다운 받아 주세요 node.js 는 보통 서버 구축을..
Coding/React 2020. 12. 10. 23:25
◀ 1 ▶

티스토리툴바