본문 바로가기

전체 글402

2024-05-31 리액트에서의 기본 문법 사용법 JSX프로젝트 셋업에서 가장 먼저 눈에 띄는 것은 App.jsx와 같은 파일들이다.이것은 jsx라는 문법을 사용하고, 콩글리쉬로는 '작스'라고 부른다.안의 내용을 보면 자바스크립트와 HTML이 혼합되어 있는 형태처럼 보인다. 그런데 실제로 HTML은 아니고, HTML과 거의 흡사하게 생긴 JSX라는 코드다.function App() { return ( Hello World! );}위 코드를 보면 자바스크립트 함수 안에 return 키워드 내부에 HTML을 사용 중인 것처럼 보인다. 위 코드는 사실 리액트에서는 아래와 같이 해석한다.function App() { return React.createElement("div", null, "Hell.. Programing/TIL 2024. 5. 31.
002. 작업 환경 설정 리액트 작업 환경 설정1. Node.js 설치Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.Node.js가 있어야 웹 브라우저가 아닌 환경에서도 자바스크립트를 사용하여 연산할 수 있다.Node.js의 등장으로 자바스크립트는 웹 개발을 너머 웹 서버, 모바일 앱, 데스크톱 앱까지 개발할 수 있게 되었다.React.js가 Node.js로 만들어진 것은 아니지만, React.js는 프레임워크가 아닌 라이브러리로, 다른 라이브러리와 함께 사용되는 경우가 많은데 그 라이브러리들이 Node.js를 사용하기 때문에 설치하는 것이다.Node.js를 설치해야 Node.js 패키지 매니저 도구인 npm이 설치된다. npm에는 패키지가 100만 개 이상이 저장되어 있다.Node.js 웹 사이.. Programing/React 2024. 5. 30.
2024-05-30 리액트의 핵심, Virtual DOM이란? 리액트 공부를 시작하면서 빨리 코드를 작성할 생각만 했지 정작 리액트가 무엇인지 설명을 못하고, virtual DOM에 대해 묻는 과제의 질문에 답하지 못했다.오늘 숙련 과제 제출이 끝났으므로, 기본을 먼저 다지고 가려고 한다.리액트의 특징Virtual DOM리액트는 Virtual DOM을 사용한다.DOM은 Document Object Model의 약자로, 객체를 통해 문서 구조를 표현하는 방법이고, XML, HTML로 작성한다.DOM의 치명적인 단점 : 정적이다. 동적 UI에 최적화 되어 있지 않다. HTML 자체는 정적인 정보만 렌더링 해준다. 자바스크립트를 통해 동적으로 만들 수 있다.그런데 소셜미디어나 대규모 포털사이트와 같은 사이트에서의 DOM은 수 백, 수 천 개에 달한다. 사용자가 DOM을 .. Programing/TIL 2024. 5. 30.
001. 리액트의 특징과 Virtual DOM 리액트의 특징Virtual DOM리액트는 Virtual DOM을 사용한다.DOM은 Document Object Model의 약자로, 객체를 통해 문서 구조를 표현하는 방법이고, XML, HTML로 작성한다.DOM의 치명적인 단점 : 정적이다. 동적 UI에 최적화 되어 있지 않다. HTML 자체는 정적인 정보만 렌더링 해준다. 자바스크립트를 통해 동적으로 만들 수 있다.그런데 소셜미디어나 대규모 포털사이트와 같은 사이트에서의 DOM은 수 백, 수 천 개에 달한다. 사용자가 DOM을 조작하여 페이지가 리페인트 될 때마다 CSS와 HTML을 매번 불러 읽어들여야 하기 때문에 성능이 저하될 수 있다.리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화 하고 효.. Programing/React 2024. 5. 30.
045. React - useMemo와 연산 최적화 메모이제이션이란?직역하자면 '기억해두기', '메모해두기'라는 의미.최초에 한 번 연산한 후 결과값을 메모해두고, 같은 계산이 반복되면 다시 계산하는 것이 아니라 결과값을 바로 꺼내어 전달해주는 것.useMemo 사용 방법// import 하기import { useMemo } from 'react';// 기본형 작성useMemo(() => {/* 여기에 연산 내용 작성 */}, []);// 의존성 배열이 비어 있으면, 마운트 시 한 번만 연산하고, 그 이후에는 컴포넌트가 리렌더링 되더라고 그 연산의 결과를 계속 재사용함.// 따라서 값이 컴포넌트 라이프사이클 동안 바뀔 일이 없을 때는// 의존성 배열을 비워두면 되고, 의존성 배열에 무언가를 넣으면 그 무언가가 변화할 때 다시 연산한다.// 즉 컴포넌트 .. Programing/React 2024. 5. 30.
2024-05-29 리덕스 개관 Redux의 기본 개념액션상태에 어떤 변화가 필요하면 action이라는 것이 발생한다. action은 하나의 객체로 표현된다. 이 액션 개체는 아래와 같은 형태로 이루어져 있다.{ type: 'TOGGLE_VALUE'}액션을 조금 더 쉽게 설명하자면 스토어라는 상태 중앙 저장소에 상태에 어떠한 변화가 일어났다고 보내는 메시지의 개념이다.액션은 자바스크립트 객체로 이루어져 있고, 리덕스에게 "이런 일이 발생했으니, 데이터를 바꿔주세요!"라고 요청하는 것이다.타입(type) 필드개발자가 자유롭게 작명하는 액션 객체의 이름임. 이를 통해 나중에 상태 업데이트 시 참고할 수 있음.{ type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' .. Programing/TIL 2024. 5. 30.
React.js에서 꼭 알아야 하는 패턴 리액트 프로젝트에서 자주 사용되는 주요 문법 패턴을 정리해보겠습니다. 이 패턴들은 대부분의 리액트 프로젝트에서 거의 항상 등장하며, 리액트 개발자라면 익숙해져야 할 요소들입니다.1. 함수형 컴포넌트 (Functional Components)함수형 컴포넌트는 간단하게 함수로 정의된 컴포넌트입니다. 상태와 훅을 사용할 수 있습니다.import React from 'react';const MyComponent = () => { return ( Hello, World! );};export default MyComponent;2. 상태 관리 (State Management) with useStateuseState 훅을 사용하여 컴포넌트의 상태를 관리합니다.import React, { u.. Programing/React 2024. 5. 29.
032. [코딩애플] [part2] Redux 2 store에 state 보관하고 쓰는 법 Redux store에 state 보관하기아래는 store 기본 세팅import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) 여기에서 createSlice import 추가.import { configureStore, createSlice } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) store에 state 만들기import { configureStore, createSlice } from '@reduxjs/toolkit'// 여기에 아래 규격으로 state를 만듦.// name과 initialState는 .. Programing/React 2024. 5. 28.
031. [코딩애플] [part2] Redux 1 Redux Toolkit 설치 Redux 사용법패키지 설치하기npm install @reduxs/toolkit react-reduxstore.js 파일 만들기이름은 자유 작명이나 일반적으로 store로 만들고,확장자는 jsx 불가. js 문법임.일반적으로 redux나 store 폴더를 만든 뒤 거기에 위치시킨다.// src/redux/store.jsstore.js 파일 기본 세팅아래 내용을 복붙한다.import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) main.jsx에서 최상위 컴포넌트 감싸기 및 store.js 파일 import 하기import React from 'react'import ReactDOM from .. Programing/React 2024. 5. 28.
048. React - Context API 상태관리 Context란?React의 상태를 관리하는 방법 중 하나.나오게 된 이유는, 리액트에서 상태를 전달하는 특성 때문인데, 리액트에서 정의한 state는 부모->자식으로 전달이 가능하고 만약 부모->자식->자식 으로 손주까지 내려가려면 부모에서 바로 손주로 내려갈 수 없고 바로 위의 부모에 한 번 전달한 뒤 다시 그 바로 위 부모로부터 전달을 받아야 한다. 이런 현상을 props drilling이라 한다. 컴포넌트가 조금만 많아지더라도 매우 복잡하기 때문에 context가 생겼다.context는 상태를 저장하는 보관소 느낌이다. 만들어 둔 상태들을 context에 저장해두고 필요한 곳에서 꺼내어 쓰면 되기 때문에 자식의 자식의 자식으로 타고타고 뚫고 들어가는 프롭스 드릴링을 하지 않아도 되어 편리하다.기본.. Programing/React 2024. 5. 28.

티스토리툴바