React (6) 썸네일형 리스트형 eventHandle로 DropDown 만들기 import React, {useState} from 'react'; import "./styles.css"; export default function App() { const [choice, setChoice] = useState(); const fruits = ["apple", "grape", "watermelon", "carrot", "orange"]; const options = fruits.map((fruit) => { return {fruit} }) const handleFruit = (e) => { setChoice(e.target.value); } return ( {options} You choose "{choice}" ); } JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이.. JSX 코드 줄이기(조건부로 출력) JSX에서 분기처리 할때 아무 생각없이 삼항연산자만 사용하곤 했는데, 강의를 들으며 다양한 조건부 출력방법이 있어 기록한다. ... return ( {filteredExpenses.length === 0 ? ( No expenses found. ) : ( filteredExpenses.map((expense) => ( )) ) } ) 위 코드를 보면 filteredExpenses.length === 0이 참일 때, ...이고 거짓일 때, filteredExpenses.map(.....)코드를 출력하는 코드이다. 1. && 연산자를 사용하여 조건부 처리 ... return ( {filteredExpenses.length === 0 && No expenses found.} {filteredExpenses.l.. 비동기 상태관리(setState) 프로젝트를 진행하며 가장 애먹었던 부분이 비동기적 상태관리이다.. React hook인 useState()에서 setState를 사용할 때 동기적 처리와 비동기적 처리에 대해 잘 이해하지 못했다. 동기적 처리과정에서는 순서대로 상태가 변경되기 때문에 문제가 없었지만, 서버요청의 응답 데이터(비동기)로 처리해야할 때에 setState 함수를 그대러 써주면 내가 원하는 대로 상태 값이 변경되지 않는다.. setState()를 알아보기 위해 아래 두개의 링크를 참고 했다. https://www.youtube.com/watch?v=hSdVDBPTT0U https://ko.reactjs.org/docs/react-component.html#setstate setState는 React hook인 useState에서.. 조금 더 익숙해진 Redux-Toolkit(사용하기) Redux-Toolkit? Redux보다 조금 더 수월하게 적용할 수 있다. 각 폴더에 import 해야할 부분은 생략함.... 1. 먼저 상태를 저장할 store인 slice를 만들어보자 redux와 같이 상태를 저장하는 store가 있다. 하지만 redux와 다르게 하나의 store에 저장하지 않고 각각의 작은 store를 생성해 저장한다. (이후 이 작은 store를 하나의 큰 스토어(combineStore로 묶는다) 이 작은 store는 createSlice()로 만든다. 이 slice에는 객체로 name과 초깃값(initionState), reducers가 들어간다. 먼저 name은 말그대로 사용할 이 slice의 이름을 임의로 지정해준다. 다음으로 초깃값은 상태가 변경되기 전 초기의 값을 설정.. React의 Diffing Algorithm(feat. Virtual DOM) 뜬금없이 왠 Diffing Algorithm? 1. React의 Diffing Algorithm!? 2. React가 DOM 트리를 탐색하는 방법? 3. Virtual DOM은 어떻게 작동하나? 4. Virtual DOM은 어떤 형태인가? 1. React의 Diffing Algorithm!? - 앞서 Virtual DOM 블로그 내용에 이어서 React는 변경된 Virtual DOM 트리에 맞게 기존 UI를 효율적으로 바꾸는 방법이 필요했다. - 효율적인 연산 방법을 위해 두가지 가정을 가지고 시간복잡도 O(n)의 새로운 휴리스틱 알고리즘을 구현한다. - 먼저 두가지 방법에 대해 말하면 더보기 1. 각기 다른 두 요소는 다른 트리를 구축할 것. 개발자가 제공하는 'Key'프로퍼티를 사용하여 여러번 렌더.. Virtual DOM에 대하여 Virtual DOM에 대해 알아보자. 1. Virtual DOM은 무엇인가? 2. Virtual DOM은 어떻게, 왜 탄생했나? 3. Virtual DOM은 어떻게 작동하나? 4. Virtual DOM은 어떤 형태인가? 1. Virtual DOM은 무엇인가? - DOM의 사본같은 개념 - React는 virtual DOM에 접근하여 변경 전과 변경 후를 비교하여 '변경된 부분'만 적용한다. 2. Virtual DOM은 어떻게? 왜? 탄생했나? - 탄생 배경을 알기 전에 먼저 DOM이 뭔지 간단하게 정리해보자. 더보기 Document Object Model. 브라우저가 JS같은 스크립팅언어의 태그들을 조작할수 있도록 태그들을 트리구조로 만든 객체화 시킨 것. - 먼저 DOM은 객체로 이루어진 계층적 트리.. 이전 1 다음
