티스토리

개발남발

검색하기

블로그 홈

개발남발

jindevelopetravel0919.tistory.com/m

꾸레 출신 개발자의 개발 공간

구독자: 3

방명록 방문하기

728x90

반응형

SMALL

주요 글 목록

[React] Component Managing Tree (컴포넌트 관리) App.jsx import React, { useState } from "react"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { const newValue = event.target.value; setInputText(newValue); } function addItem() { setItems(prevItems => { return [...prevItems, inputText]; }); setInputText(""); } return ( To-Do List Add {items.map(todoItem => .. 공감수 0 댓글수 0 2023. 9. 5.
[React] Spread 연산자 Spread 연산자는 기존에 길게 작성되었던 코드를 단순화하여 줄일 수 있는 연산자입니다. 예를 들어 if문으로 여러 조건을 가진 코드를 spread 연산자를 통해 줄여줄 수 있습니다. 이를 arrow function과 useState 에 접목해서 사용하는 방식에 대해서 알아보겠습니다. 기존 방식의 긴 코드 작성 App.jsx import React, { useState } from "react"; function App() { const [contact, setContact] = useState({ fName: "", lName: "", email: "" }); function handleChange(event) { const { name, value } = event.target; setContact.. 공감수 0 댓글수 0 2023. 8. 31.
[React] Complex한 state 관리 이번에는 기존의 state 관리하는 방법보다 좀 더 복잡한 state를 관리하는 방법에 대해서 정리해보겠습니다. Complex State란 자바스크립트 개체 상태를 좀 더 복잡한 관리를 말합니다. 개체의 이전 값을 돌려받거나 사용해야할 경우의 관리를 말합니다. 예를 들어 웹사이트에 두 가지의 값을 입력하면 두 가지 입력 정보를 이용해 사용자에게 보여지게끔 할 수 있게 만드는 것입니다. 예시로 든 두 가지의 값 입력 사이트로 확인해보겠습니다. 기존의 useState 관리 방식 App.jsx import React, { useState } from "react"; function App() { const [firstName, setFirstName] = useState(""); const [secondNam.. 공감수 0 댓글수 0 2023. 8. 31.
[React] 클래스 Components VS 기능 Components ReactApp에 state(상태)를 관리하고 제어하는 방법에는 크게 두 가지가 있는 것으로 알고있습니다. 그게 클래스 컴포넌트, 기능 컴포넌트 입니다. 기능 Components import React, { useState } from "react"; function FunctionalComponent() { const [count, setCount] = useState(0); function increase() { setCount(count + 1); } return ( {count} + ); } export default FunctionalComponent; 기능 컴포넌트는 제가 이전부터 공부하고 정리했던 내용들처럼 function 함수를 사용한 컴포넌트 구성이라고 볼 수 있습니다. 상태(state).. 공감수 0 댓글수 0 2023. 8. 29.
[React] React Form (추가 이벤트 핸들링) 이전에는 간단한 React 이벤트 핸들링에 대해서 정리해보았습니다. 이번에는 그보다 조금 더 심화적인 형식에 대해서 정리해보겠습니다. 웹 앱을 만들 때 로그인, 등록, 접근을 위한 형식을 만드는 것은 아주 흔한 작업이라고 볼 수 있습니다. 그리고 이 형식이 어떻게 동작하는지 이해하려면 상태를 설정하고 사용하는 법을 알아야 합니다. 그래서 이번에는 입력 요소로 사용자가 입력하는 값을 얻는 방법과 사용자가 입력한 정보를 사용하기 위해 버튼을 사용하는 방법을 살펴보겠습니다. 버튼을 클릭했을 때 onClick과 같은 속성을 통해 이벤트를 제어하는 것처럼 입력하는 동작에 있어서도 이벤트가 존재합니다. input 태그 안에 onChange라고 하는 속성을 사용하면 입력값이 바뀔 때마다 매번 트리거가 작동되어 사용자.. 공감수 0 댓글수 0 2023. 8. 29.
[React] React 이벤트 핸들링 React의 이벤트 처리에 대해 좀 더 정리해보겠습니다. 사용자가 앱 또는 구성 요소와 언제 상호 작용하는지 어떻게 감지하는지 그런 이벤트에 따라 어떻게 반응하는지 이런 여러 이벤트에 대한 정리라고 볼 수 있을 것 같습니다. index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); [App.jsx] import React from "react"; function App() { return ( Hello Submit ); } export default App; 간단한 텍스트를 입력할 .. 공감수 0 댓글수 0 2023. 8. 28.
[React] Hook - useState hook은 웹 사이트의 상호 작용을 가능하게 하고 변경 가능한 상태를 만드는 방법입니다. React는 실시간 웹 상호 작용으로 인해 새로고침을 하지 않아도 실시간으로 결과가 반영되는 부분에 있어서 장점이 있습니다. 다만 평범하게 React로 코드를 구성했다고 해서 실시간으로 반영이 되는 것이 아니라 hook을 사용해야 합니다. 간단한 프로그램을 만들어 보면서 학습해보도록 하겠습니다. import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase(){ count++; console.log(count); } ReactDOM.render( {count} + , document.getElementById(".. 공감수 0 댓글수 0 2023. 8. 3.
[React] state(상태)와 React 프로그래밍 방식 React 는 실시간으로 상태값이 변동됨에 따라 스타일, 구성, 및 구조가 변경되기 때문에 상태 변동에 예민합니다. 예를 들어 물이 일정 수준의 온도 이하로 내려가면 얼음이 되고, 다시 온도가 올라가면 물이 되듯이 React도 어떠한 상태에 따라 결과가 변하게 됩니다. 이런 상태를 state 라고 합니다. state를 변경할 때마다 새로이 동작되는 React 프로그래밍 방식에는 대표적으로 선언적 프로그래밍, 명령형 프로그래밍 두 가지가 있습니다. Declatative Programming (선언적 프로그래밍) var isDone = false; function strike() { isDone = true; } function unStrike() { isDone = false; } function App(.. 공감수 0 댓글수 0 2023. 8. 3.
[React] 간단 로그인 페이지 구성 / 조건부 렌더링 (삼항 연산자, && 연산) 이번에는 간단한 로그인 페이지를 구성해보고 추가적으로 조건에 따른 렌더링에 대한 작업에 대해 알아보겠습니다. Index.html 렌더링될 페이지입니다. index.js에 렌더링되는 내용들을 포함되어있고, root 영역에 렌더링 될 것입니다. Index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); render 함수를 통해 index.html에 root 영역에 렌더링 App 컴포넌트를 렌더링시킵니다. App.jsx import React from "react"; import Login.. 공감수 0 댓글수 0 2023. 8. 2.
[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 컴포넌트를 수동으로 반복 호출하는 다소 비효율적인 방식이라.. 공감수 0 댓글수 0 2023. 7. 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.. 공감수 0 댓글수 0 2023. 7. 25.
[React] Props Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다. 태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다. 이것을 보완해서 작성해보겠습니다. 반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다. 렌더링 함수 쪽에 보면 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다. 하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다. 따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합.. 공감수 0 댓글수 0 2023. 7. 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.. 공감수 0 댓글수 0 2023. 7. 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 .. 공감수 0 댓글수 0 2023. 7. 21.
[React] React Component (컴포넌트) React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다. 하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다. 단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다. 이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다. 기존의 React 파일 구성 index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite.. 공감수 0 댓글수 0 2023. 7. 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.. 공감수 0 댓글수 0 2023. 7. 20.
[React] JSX JSX란 Javascript를 확장한 문법입니다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 렌더링 예시 코드 index.html index.js // React 렌더링을 사용하기 위해 React, React Dom 디펜던시 import // import 방법 1 import React from "react"; import ReactDom from "react-dom"; // im.. 공감수 0 댓글수 0 2023. 7. 20.
[React] React란? React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다. js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다. React 특징 1. 데이터 흐름 React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. 2. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소.. 공감수 0 댓글수 0 2023. 7. 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.. 공감수 0 댓글수 0 2023. 7. 11.

728x90

반응형

LIST

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.