티스토리

개발해도유
검색하기

블로그 홈

개발해도유

doyu-l.tistory.com/m

어제보다는 오늘이, 오늘보다는 내일이.

구독자
7
방명록 방문하기
공지 어제보다는 오늘이, 오늘보다는 내일이 모두보기

주요 글 목록

  • React.lazy()와 React.Suspense * React.lazy() 메서드의 쓰임새와 작성 방법 * suspense의 쓰임새와 작성 방법 React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리이다. React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점이다. 해당 경고문은 이제 React 18 버전은 더 이상 ReactDOM.render를 지원하지 않는다는 내용이다. 물론 버전이 18보다 낮은 앱에서는 해당 경고문은 보이지 않는다. 그러나 계속해서 업데이트가 되고 있는 라이브러리이니만큼 해당 이슈는 알아둬야 할 것이다. React 18이전의 index.js const rootElement = document.getElementByI.. 공감수 0 댓글수 0 2023. 5. 22.
  • 코드 재사용을 도와주는 Custom Hooks Custom Hook을 쓰는 이유 Custom Hook은 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 보자. (React 공식 문서에 있는 컴포넌트) //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 fun.. 공감수 0 댓글수 0 2023. 5. 22.
  • React의 렌더링 최적화를 도와주는 useCallback useMemo와 useCallback의 차이 React Hook은 렌더링 최적화를 위한 Hook이 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. 아래의 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태이다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력한다. 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어진다. function Calculator({x,.. 공감수 0 댓글수 0 2023. 5. 19.
  • React의 렌더링 최적화를 도와주는 useMemo 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이다. 그중 렌더링 최적화를 위한 Hook도 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. 다시 말해, 메모이제이션(Memoization) 개념을 이용한 Hook이다. 예를 들어 아래의 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 .. 공감수 0 댓글수 0 2023. 5. 19.
  • React의 Hook의 개념과 사용 규칙 * 함수 컴포넌트와 클래스 컴포넌트의 차이 * 함수 컴포넌트에서 Hook을 사용하는 이유 * Hook의 개념 및 사용 규칙 React Hooks는 React 16.8 버전부터 추가된 기능으로, React에는 다양한 Hook이 존재하고 있다. Hook이란, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다. 뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 훅은 사용률이 매우 높은 편이다. Class Component & Function Component Hook은 함수 컴포넌트에서 사용하는 메서드이다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었다. Class Component 아래.. 공감수 0 댓글수 0 2023. 5. 19.
  • React Diffing Algorithm - 상태변화를 감지할 수 있도록 하는 React의 비교 알고리즘 React의 가상 DOM 비교 알고리즘 React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식을 알아내야만 했다. 알아낸 조작 방식 알고리즘은 O(n^3)의 복잡도를 가지고 있었다. O(n^3) 복잡도는 입력 크기에 대해 세제곱 비례로 증가하는 복잡도를 의미한다. 알고리즘의 성능을 분석하기 위해 복잡도를 계산하는 것은 중요한 과정이다. 이를 통해 알고리즘의 효율성을 평가하고, 큰 입력에 대해 얼마나 잘 처리할 수 있는지 예측할 수 있다. 일반적으로 좋은 알고리즘은 작은 복잡도를 가지며, 큰 입.. 공감수 0 댓글수 0 2023. 5. 19.
  • [React] Virtual DOM * Virtual DOM이 나오게 된 배경 * Virtual DOM의 개념 * React가 DOM 트리를 탐색하는 방법 * DOM 엘리먼트의 타입이 같을 때와 다를 때의 React 동작 방식 Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있.. 공감수 0 댓글수 0 2023. 5. 19.
  • [JS] useEffect 용례 * 레퍼런스 - 리액트 공식문서 : useEffect - React Hooks에 취한다 - 유튜브 미리 알고 있어야 하는 개념 useEffect(setup, [dependencies]) 컴포넌트의 최상위 수준에서 useEffect를 호출하여 Effect를 선언한다. useEffect는 undefined 값을 반환한다. Mount & Unmount useEffect의 setup & cleanup useEffect가 작동하는 과정은 다음과 같다. (예: 채팅 외부시스템을 가져와서 웹 화면에 구현) 컴포넌트가 마운팅되면, (페이지에 추가) setup 코드가 작동한다. (예: '과일' 주제의 채팅창 열기) 종속성 배열 인자의 값이 변할 때마다 컴포넌트는 리렌더링 된다. (예: 종속성 배열 인자는 채팅창의 주제(.. 공감수 0 댓글수 0 2023. 5. 4.
  • 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (2) 본격적으로 본론에 들어가기 전에, npm trends를 살펴보면 상태 관리 라이브러리 중에서도 redux(하늘색)가 가장 많이 쓰이고 있는 것을 알 수 있다. 따라서, 비교적 간편한 Redux toolkit을 쓰기 전에, 기존 Redux 코드를 작성해보며 데이터 흐름을 숙지하고, 개념을 확실히 이해하고 넘어가야 할 필요가 있다. 장바구니 추가, 삭제 등 기본적인 쇼핑몰 기능을 구현한 이전 포스팅 에서 더 나아가, 두 번째 포스팅에서는 해당 앱에서 구현한 또 다른 Reducer인 notificationReducer 등에 대해 다뤄보겠다. 결과 화면 장바구니에 없는 물건을 '장바구니 담기'를 눌렀을 때 -> "장바구니에 ~~이(가) 추가되었습니다." 메시지가 뜬다. 장바구니에 이미 있는 물건을 또 '장바구니.. 공감수 0 댓글수 0 2023. 4. 26.
  • 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (1) * Redux의 설계(원리와 구조) 파악하기 - Action, Dispatch, Reducer, Store 작성하고 연결하여 사용하기 - Redux hooks(useSelector, useDispatch)를 사용해 Store 업데이트 하기 즉, React Hooks에서의 상태 변경 로직(이전 포스팅)이 Redux에서 어떻게 컴포넌트로부터 분리되는 지를 파악하는 것이 목적이다. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. .. 공감수 0 댓글수 0 2023. 4. 26.
  • Redux로 간단한 Count 기능 구현하기 Redux를 사용하기 위해서는 redux와 react-redux를 설치해야한다. 설치를 하고 나면, DEPENDENCIES redux, react-redux가 설치되어 있는 것을 확인할 수 있다. . . . "dependencies": { "@types/react": "^16.8 || ^17.0 || ^18.0", "@types/react-dom": "^16.8 || ^17.0 || ^18.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-native": ">=0.59", "react-redux": "^8.0.2", "redux": "^4" }, . . . index.js import React from 'react'; import { createRoot .. 공감수 0 댓글수 0 2023. 4. 24.
  • 상태 관리 라이브러리 Redux [프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법] * 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 Redux - 컴포넌트와 상태를 분리하는 패턴 - Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징 - Redux의 3가지 원칙 React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴.. 공감수 0 댓글수 0 2023. 4. 24.
  • 쇼핑몰 애플리케이션에서 Hooks를 이용한 상태 관리 * React Hooks를 사용한 상태 관리 방법 - 컴포넌트끼리 상태 주고받기 결과 화면 파일(컴포넌트) 구조 루트 컴포넌트 : 내비게이션 바 "상품리스트" , "장바구니" 버튼 또는 : 물건 목록이 나열된 쇼핑몰 메인 화면 또는 장바구니 화면 (Pages) : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니 담기' 버튼 등 : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니에서 삭제하기' 버튼 등 : 주문 합계, 총 아이템 개수 등 상태 상품 목록 (items) : 개별 상품에 대한 정보를 담은 객체 (배열의 형태) { "id": 1, "name": "노른자 분리기", "img": "../images/egg.png", "price": 9900 } 장바구니 목록(cartItems) :.. 공감수 0 댓글수 0 2023. 4. 24.
  • Props Drilling이란? Props Drilling이란? [Props Drilling] 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상이다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야 한다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다. 코드의 가독성이 매우 나빠지게 된다. 데이터의 출처를 쉽게 파악할 수 없어서 코드의 유지보수 또한.. 공감수 0 댓글수 0 2023. 4. 21.
  • [React] 전역 상태의 필요성 * (프론트엔드에서의) 상태 관리의 개념과 필요성 * 로컬 상태와 전역 상태의 차이점 * 전역 상태의 필요성 * 상태 관리 라이브러리의 필요성 상태 관리 React는 상태 관리를 위한 라이브러리가 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다. 여기에 쇼핑몰에서 흔하게 볼 수 있는 장바구니 화면이 있습니다. 여기에는 다양한 상태가 존재한다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있다. 동적인 데이터이므로 이것은 상태이다. 상단에 [일반구매/정기배송.. 공감수 0 댓글수 0 2023. 4. 21.
  • Styled Components로 ClickToEdit 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 ClickToEdit 커스텀 컴포넌트를 구현 ClickToEdit Component 완성 예시 ClickToEdit 컴포넌트는 input 창을 클릭하면 수정이 가능하고, input 창이 아닌 다른 곳을 클릭하면 수정한 내용이 반영되는 기능을 가진 컴포넌트이다. 필요한 컴포넌트 InputView (div) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 -- label : '이름', '나이' l -----------------> clickToEdit 컴포넌트 (부모) MyInput : 실제로 이름, 나이 값을 입력할 수 있는 박스 ------ InputBox ---.. 공감수 0 댓글수 0 2023. 4. 20.
  • Styled Components로 Tag 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tag 커스텀 컴포넌트를 구현 Tag Component 완성 예시 Tag UI 컴포넌트는 레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 사용된다. 필요한 컴포넌트 TagInput (div) : Tag 최상위 박스 ul id "tags" li className "tag" : 각각의 tag 박스 (나열) span className "tag-title" span className "tag-close-icon" input className "tag-input" : tag를 입력하여 추가하는 구역 state Tag 컴포넌트는 아래와 같은 state.. 공감수 0 댓글수 0 2023. 4. 20.
  • Styled Components로 Tab 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tab 커스텀 컴포넌트를 구현 Tab Component 완성 예시 Tab UI 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할 때 사용한다. 필요한 컴포넌트 TabMenu (ul) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 li ClassName "submenu focused" 또는 "submenu" (조건부 스타일링) Desc (div) : 선택한 Tab에 따라 넣어둔 텍스트를 담는 컴포넌트 state Tab 컴포넌트는 아래와 같은 state가 존재한다. currentTab state : 현재 tab의 index를 확인 토글 버튼 제어를 위한 핸들러 함수 s.. 공감수 0 댓글수 0 2023. 4. 20.
  • Styled Components로 Toggle 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Toggle 커스텀 컴포넌트를 구현 Toggle Component 완성 예시 Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치를 Toggle Switch라고 할 수 있다. 필요한 컴포넌트 ToggleContainer (div) : Toggle을 구현하는데 필요한 컴포넌트를 감싸주는 컨테이너 div ClassName "toggle-container" : Toggle 바깥쪽 테두리 div ClassName "toggle-circle" : Toggle 안쪽 원 도형 (Toggle.. 공감수 0 댓글수 0 2023. 4. 20.
  • Styled Components로 Modal 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Modal 커스텀 컴포넌트를 구현 * Storybook을 사용한 컴포넌트 관리 Modal Component 완성 예시 Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 팝업 창: 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것 (브라우저에서 이 창을 열고 닫기 제어가 가능) 모달 창: 현재 열려있는 브라우저 페이지에 레이어를 까는 것 (기존의 페이지와 부모-자식의 관계로 브라우저의 새 창 제어 옵션에 전혀 영향을 받지 않는다.) -> 팝업 창은 기존의 웹 페이지와 분리된 상태에서 작.. 공감수 1 댓글수 0 2023. 4. 20.
  • React Custom Component 개요 UI 컴포넌트의 필요성 UI를 개발해 본 개발자라면 UI 개발은 다른 분야의 개발보다 복잡하고 까다롭다는 사실을 알 것이다. UI 개발은 도대체 왜 까다로운 걸까? 프로젝트의 상황에서 절대적으로 많은 수의 화면과 복잡한 화면이 문제이다. 웹사이트의 모든 화면들을 분석해 보면 몇 가지 패턴들을 발견할 수 있다. 즉, 화면이 아무리 복잡하고 다양해도 기본적인 레이아웃 구성 내부에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많다. 그렇다면 개발자들은 반복되는 UI들을 어떻게 재사용하고 있었을까? 누군가 먼저 코드를 설계해 놓으면 그 코드를 비슷하게 쓰거나, 해당 UI가 어느 화면에 개발되어 있는지 알 수 없을 땐 새로 개발하기도 했다. 이런 크고 작은 불편함이 쌓여, 자연스럽게 UI 컴포넌트 개발에 대한.. 공감수 0 댓글수 0 2023. 4. 19.
  • DOM reference를 잘 활용할 수 있는 useRef React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 하지만, 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 발생하기도 한다. 아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 이럴 때 사용할 수 있는 것이 바로 useRef라는 Hook 함수이다. React는 이런 예외적인 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래 코드처럼 작성하면 주소값을 활용할 수 있다. input focus const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 .. 공감수 1 댓글수 0 2023. 4. 18.
  • [React] StateAirline Client (2) : Effect Hook * React를 이용해 서버와 정보를 주고 받는 웹 페이지를 구성하기 - Effect Hook을 활용하여 비동기 호출 및 Ajax 요청과 같은 side effect를 처리 - 네트워크 요청이 느릴 경우에 표시되는 로딩 화면을 구현 네트워크 요청을 통해 항공편 리스트를 받아오고, 도착지 정보 검색 기능 구현하기 검색 조건을 변경하면 네트워크 요청을 보내고, 서버로부터 받은 응답을 결과 목록에 적용한다. (1) Side Effect가 발생하는 함수를 Main 컴포넌트에서 호출 앞서 검색 조건을 담은 객체 condition이 바뀌면, Main 컴포넌트 자체 필터링에 의해서 검색 결과가 바뀌는 것을 알았다. (아래 참고) // ** Main 컴포넌트에 구현되어 있었던 필터링 함수 : (1)편에서 사용했음 con.. 공감수 0 댓글수 0 2023. 4. 3.
  • [React] StateAirline Client (1) : 상태 끌어올리기 * 상태 끌어올리기, 데이터 흐름 개념을 활용하여 항공편 검색 기능을 구현한다. - React의 데이터 흐름에 대해 이해하고 state를 전달할 수 있다. - 상태 끌어올리기를 활용하여, 원하는 컴포넌트에서 state를 변경할 수 있다. - 검색 조건을 변경하면, 해당 검색 조건에 맞는 항공권이 필터링되어 목록에 표시되게 한다. 디렉토리 구조 . ├── README.md ├── __tests__ │ └── index.test.js # 테스트 파일 ├── api │ └── FlightDataApi.js # 항공편 정보를 받아오는 API ├── package.json ├── pages │ ├── Main.js # 첫 화면 컴포넌트, 필터링 상태를 담고 있다. │ ├── component │ ├── Debug.. 공감수 0 댓글수 0 2023. 4. 2.
  • [React] State & Props로 간단한 트위터 추가 기능 구현하기 추가 기능 1. 특정 유저 게시글 필터 기능 2. 게시글 삭제 기능 1. 특정 유저 게시글 필터 기능 tweets.js // ** Tweets.js import React, { useState } from "react"; import Footer from '../Footer'; import Tweet from '../Components/Tweet'; import './Tweets.css'; import dummyTweets from '../static/dummyData'; const Tweets = () => { const [username, setUsername] = useState("Doyu 🤍"); const [msg, setMsg] = useState(""); const [tweets, setTw.. 공감수 0 댓글수 0 2023. 4. 2.
  • [React] 데이터 흐름 & State 끌어올리기 (Lifting State Up) 이전 글 참고 : React 데이터의 흐름 * State 끌어올리기 - 상태 변경 함수가 정의된 컴포넌트 - 상태 변경 함수를 호출하는 컴포넌트 * React 공식 문서의 주요 개념 일단 이거부터 보고 가자 ㅋㅋㅋㅋ (bgm과 같이 보는 유튜브 쇼츠 링크 클릭!) 역방향 데이터? (스포: 아니다.) 저번 글과 비교하며 컴포넌트들의 달라진 관계를 보면, Tweets 컴포넌트에서 관리하고 있었던 데이터(전체 트윗 목록)은 NewTweetForm 컴포넌트를 통해 변경이 된다. 즉, 새 글을 추가하는 이벤트가 발생할 경우, 이때 전체 트윗 목록에 새로운 트윗 객체를 추가할 수 있어야 한다. NewTweetForm과 Tweets 두 컴포넌트 모두 트윗 목록에 의존한다. 그렇다면, 두 컴포넌트의 부모인 Twittl.. 공감수 0 댓글수 0 2023. 4. 1.
  • [React] Goodbye create-react-app! https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o Goodbye create-react-app React developer team recently removed create-react-app from the official documentation. This means it... dev.to 1. React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to this pull .. 공감수 0 댓글수 0 2023. 3. 31.
  • [React] State & Props로 간단한 트위터 기능 구현하기 컴포넌트 위주로 간단히 구현한 결과물 깃헙 링크 추가로 구현한 디테일 (1) 전송 버튼을 누르면 userID는 그대로, 내용 입력칸은 초기화된다. (2) Tweets에서 트위터 기존 글 + 새로 생성되는 글에 대한 총 데이터를 다뤘다. 그리고 화면에 렌더링하기 위해 그의 자식 컴포넌트인 tweet 으로 내려가는 데이터를 Tweets의 형제 컴포넌트도 받아와 filter을 거쳐 특정 user의 게시글만 보이게 했다. -> 여기서 많은 삽질이 일어난다.. 그건 제일 아래에 나온다... 핵심적으로 구현해야 할 기능은 유저 Doyu 🤍의 Twittler에서의 트윗 전송 기능 및 생성된 트윗 추가이다. 이 기능 구현을 위해서 어떤 컴포넌트에 어떤 state가 필요하고, 이 state를 어떻게 변화시킬 것인지 고민.. 공감수 1 댓글수 0 2023. 3. 27.
  • [React] React 데이터 흐름 제일 먼저 컴포넌트 만들기 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 그림과 같이 앱의 프로토타입을 전달받았다면 먼저 컴포넌트를 찾아본다. 프로토타입에서 위의 오른쪽 그림과 같이 컴포넌트를 찾아냈다. 이렇게 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다. 즉, 상향식(bottom-up)으로 앱을 만든다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 그래서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 트위터 클론 Twittler 예시 여기 간단한 트위터 클론 Twittler가 있다. 여기에 그림과 같은 형태로 컴포넌트 디자인을 해볼 것이다. 이.. 공감수 1 댓글수 0 2023. 3. 24.
  • [React] React의 이벤트 처리(Event handling) : state 다양한 응용 React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다. 단, 몇 가지 문법 차이가 있다. React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다. 이벤트 핸들러는 props로 전달할 수 있다. 예를 들어 HTML에서 이벤트 처리 방식이 아래와 같다면, Event React의 이벤트 처리 방식은 아래와 같다. Event 자주 사용되는 이벤트 처리에 대해 알아보자. onChange 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다. React 에서는 이러한 변경될 수 있는 입력값을 일반적.. 공감수 0 댓글수 0 2023. 3. 24.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.