기술 창고/React(17)
-
[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 -
[React] JSX 속성과 React CSS 스타일링
JSX 문법에 스타일링 하는 것은 기본 Javascript와 다르지 않습니다. 다만 약간의 차이점이 있을 뿐입니다. JSX 문법에 스타일링 하는 방법에 대해서 간단하게 알아보겠습니다. 기본 스타일링 index.html index.html 에는 React JSX 를 import 하고 있습니다. 여기서 일반 Javascript를 import 하는 것이라면 type을 "text/javascript" 라고 했겠지만, JSX 이기 때문에 type은 "text/JSX"입니다. index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite Foods Bacon Jamon Noodles , documen..
2023.07.20 -
[React] React란?
React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다. js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다. React 특징 1. 데이터 흐름 React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. 2. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소..
2023.07.20 -
[React] S3 파일 불러오기
AWS S3 로 관리하고 있는 미디어 파일을 React 프로젝트에 불러오는 과정을 정리해보겠습니다. npm i aws-sdk npm i aws-sdk 명령어를 진행 중인 프로젝트의 터미널에서 입력하여 aws 를 설치해주거나 ubuntu 서버와 같은 가상 서버를 사용한다면 해당 서버 내의 프로젝트에 들어가서 터미널에 명령어를 입력하여 aws를 설치해줍니다. [ awsS3.js ] import AWS from "aws-sdk"; const config = { aws_reg: "",// aws 지역 ex ) ap-northeast-2 aws_key: "",// aws 키 aws_sec: "",// aws 시크릿 키 }; AWS.config.update({ region: config.aws_reg, access..
2023.07.11