분류 전체보기141 [TIL-008] 리액트 Hooks, 최적화 과정, VDOM 이해 Today목표 : 4/18일 리액트 Hooks, 최적화 과정, VDOM 이해 알게된 점, 리액트 Hooks(useContext, useCallback, useMemo, )✅ 1. useContext => react context API로 전역 데이터를 관리한다. 부모 -> 자식으로 데이터를 전달할 때. props으로 내려주면서, 드릴링 현상이 일어난다. - props drilling의 문제점 1. 너무 깊어지면(만약 단계가 100..이렇게) 어디에서 props를 내려주고 있는지 파악이 어려움 2. 어떤 컴포넌트에서 에러 발생 시 디버깅이 힘들어짐 useContexnt => 데이터를 전역 데이터로 관리함으로서 하위 컴포넌트에서도 접근 가능하게 하여 props 드릴링을 하지 않아도 된다. context의 필.. 2023. 4. 19. [TIL-007] 리액트 Hooks, Styled-component, 리액트 todo-list, 튜터님 질문 응답 정리 Today목표 : 4/17일 리액트 Hooks, Styled-component, 리액트 todo-list, 튜터님 질문 응답 정리 알게된 점, 리액트 Hooks(useState, useEffect, useRef)✅ 1. useState : state가 업데이트 될 때 마다 리렌더링 리액트에서 state를 업데이트 하는 방식 : 배치 업데이트 vs 함수 업데이트 차이 1) 배치 업데이트 { setCount(count + 5); setCount(count + 1); setCount(count + 1); // 명령을 모아 가장 마지막만 반영되어 한번만 업데이트 }} > => 명령의 변경 사항을 모아서 '한번만' 업데이트 한다. 2) 함수 업데이트 { setCount((currCount) => currCount.. 2023. 4. 18. [TIL-006] 리액트 개념, 리액트에서 SCSS 사용해 보기 Today목표 : 4/15일 리액트 개념, 리액트에서 SCSS 사용해 보기 알게된 점, 리액트 개념 공부✅ 1. State를 쓰는 이유 상태값에 따라 UI를 변경하기 위해서 => 리렌더링을 다시 하기 위해서 state는 구조분해 할당하여 사용한다. const [state, setState] = useState(0) 2. 리액트의 생명 주기 mount - update - unmount 1) 불변성 => 메모리의 값을 변경할 수 없는 것 - 원시타입 : 불변함 => 메모리값을 변경하지 않고, 새로 할당하기 때문 - 객체타입 : 가변함 => 주소값 안의 데이터를 변경 => obj1 영역의 메모리 값을 변경하기 때문 => 따라서 복사 시에 주소값을 새로 할당하여 새 obj영역의 주소를 부여해 메모리값이 변경되지.. 2023. 4. 16. [React] CRA에서 eject없이 SCSS사용하기 CRA에서 eject없이 SCSS사용하기 1. sass 설치 => scss를 css로 변환해 주는 라이브러리 yarn add node-sass 2. styles 폴더 생성, 내부에 scss폴더 생성 후 scss파일 생성 3.터미널 에서 사용시, package.json에서 script에 "sass"명령어를 추가해 주어야 한다. => 이 때는 map파일도 같이 생성되어 원하지 않을 경우 따로 map파일이 생성되지 않도록 설정할 필요가 있다. "sass": "sass --watch src/styles/scss:src/styles/css" yarn run sass => watch 시작 익스텐션 사용시 : liveSass 경로 설정 => /src/styles/css 폴더에 css파일이 생성되도록 설정 3. wat.. 2023. 4. 15. [TIL-005] 리액트 첫주차 - 리액트의 개념, 첫 면접 스터디 발표 Today목표 : 4/14일 리액트의 개념 이해, 첫 면접 스터디 발표 알게된 점, 리액트의 개념에 대한 이해 🟡 1. 왜 리액트를 써야 할까? 1) 페이스북에 의한 유지보수 2) 막강하고 방대한 커뮤니티 3) 공식문서도 굉장히 잘 나와있고, 자료가 방대하다. 4) 리액트 패키지들이 많다. 5) React Native, electron, VR 등 상생이 좋다. 6) NPM trend 1위로 가장 많이 사용되는 라이브러리다. 막연히 그냥 많이 쓰기 때문에 사용하는 것보다는 내가 React를 사용하는 이유를 명확히 하고 사용하는 것이 좋을 것 같다. 2. 리액트는 SPA(Single Page Application)기반이다. 1) 기존 MPA(Multi Page Application)의 문제점 여러 페이지로 .. 2023. 4. 15. [JavaScript] 동기와 비동기 차이, 비동기 처리 방식의 종류와 특징 1. 동기와 비동기의 이해 자바스크립트는 동기적 언어이며, Single Thread 언어다. 자바스크립트는 hoisting이 된 이후부터, 코드를 한줄씩 스크립팅하여 순차적으로 실행된다. 여기서 자바스크립트는 Single Thread 언어이기 때문에 하나의 Thread만 존재하며, 하나의 stack이 존재한다. 이 말의 뜻은, 하나의 Call stack에 쌓인 환경정보를 기반으로 컨텍스트를 생성하고 코드를 실행시키기 때문에 LIFO에 의해 순차적으로 순서가 보장된다는 것이며, 즉 자바스크립트 엔진 자체만으로는 멀티쓰레딩이 불가능 하다는 것이다. 현재 task가 종료되기 전까지 다른 task가 실행될 수 없다는 것을 의미하기도 한다. 💡 자바스크립트는 Single Thread 언어인데, 어떻게 비동기 처리.. 2023. 4. 14. 이전 1 ··· 8 9 10 11 12 13 14 ··· 24 다음 728x90 반응형
