- 전체보기(260)
- 프로그래머스(113)
- 자바스크립트(32)
- 코딩애플(28)
- 모던 자바스크립트 Deep Dive(22)
- React(13)
- 자료구조(11)
- 알고리즘(10)
- 노마드코더(9)
- github(8)
- node.js 교과서(7)
- Firebase(6)
- git(5)
- JavaScript(5)
- 초보자를 위한 리액트 200제(5)
- ES6(5)
- CSS(4)
- 스택(4)
- 객체지향(4)
- Summer/Winter Coding(~2018)(3)
- class(3)
- setter(2)
- extends(2)
- 코딩테스트 입문(2)
- typescript(2)
- promise(2)
- 상속(2)
- 완전탐색(2)
- BFS(2)
- DP(2)
- GET(2)
- 프론트엔드(2)
- 스택/큐(2)
- react router(2)
- DFS(2)
- 빅오 표기법(2)
- 반응형 웹(2)
- 2019 카카오 개발자 겨울 인턴십(2)
- Constructor(2)
- html(2)
- clone(2)
- 트리(2)
- push(2)
- 2017 팁스타운(2)
- REST(2)
- 2018 KAKAO BLIND RECRUITMENT(2)
- big o notation(2)
- heap(2)
- Prototype(2)
- 코테(2)
- set(2)
- js(2)
- 탐욕법(Greedy)(2)
- 재귀(2)
- CS(2)
- getter(2)
- stack(1)
- queue(1)
- Pull Request(1)
- 해시(1)
- priority queue(1)
- 그래프 순회(1)
- 유효성검사(1)
- yarn(1)
- recursion(1)
- 이중 연결 리스트(1)
- 2020 카카오 인턴십(1)
- 문제해결접근법(1)
- 분할 정복(1)
- shadow dom(1)
- 해시 테이블(1)
- imperative(1)
- arguments(1)
- router(1)
- 클라우드(1)
- Document(1)
- 탐욕법(1)
- 빈도수 세기(1)
- await(1)
- useEffect(1)
- for ~ in(1)
- Insertion Sort(1)
- Selection Sort(1)
- Spread(1)
- async(1)
- 월간 코드 챌린지 시즌1(1)
- branch(1)
- Flex(1)
- export(1)
- &&(1)
- 공간 복잡도(1)
- 선형 검색(1)
- reducer(1)
- method(1)
- unshift(1)
- Object.create(1)
- hoisting(1)
- 2019 Kakao Blind Recruitment(1)
- template literals(1)
- npx(1)
- Unidirectional Data Flow(1)
- 얄코(1)
- Primitive Data Type(1)
- Reference Data Type(1)
- box-sizing(1)
- 자바사크립트(1)
- events(1)
- Helper Method Recursion(1)
- declarative(1)
- 검색 알고리즘(1)
- 해시함수(1)
- 웹브라우저 동작원리(1)
- build(1)
- gh-pages(1)
- Big O(1)
- font awesome(1)
- React 완벽 가이드(1)
- 퀵 정렬(1)
- State(1)
- this(1)
- arrow function(1)
- 2022 KAKAO BLIND RECRUITMENT(1)
- 다중 포인터(1)
- 크로스 브라우징(1)
- 너비우선탐색(1)
- Sass(1)
- styled components(1)
- 모바일앱(1)
- fork(1)
- 깊이우선탐색(1)
- shift(1)
- 생명주기 함수(1)
- preventDefault(1)
- 문제 해결 패턴(1)
- storage(1)
- localstorage(1)
- Pop(1)
- remove(1)
- 동기식처리(1)
- 정렬(1)
- reverse(1)
- 코딩앙마(1)
- 이진 검색(1)
- ES5(1)
- 2021 KAKAO BLIND RECRUITMENT(1)
- array(1)
- spread operator(1)
- super(1)
- 삽입 정렬(1)
- 단일 연결 리스트(1)
- proptypes(1)
- geolocation(1)
- 벤더 프리픽스(1)
- random(1)
- tagged literals(1)
- interval(1)
- 다익스트라 알고리즘(1)
- 우선순위 큐(1)
- 변수(1)
- svg(1)
- 2021 카카오 채용연계형 인턴십(1)
- Database(1)
- Map(1)
- 그래프(1)
- .env(1)
- CRUD(1)
- 합병 정렬(1)
- Props(1)
- 큐(1)
- 2023 KAKAO BLIND RECRUITMENT(1)
- 시간 복잡도(1)
- Date(1)
- web-components(1)
- grid(1)
- 운영체제(1)
- 트리 순회(1)
- 기수 정렬(1)
- 2021 Dev-Matching: 웹 백엔드 개발자(상반기)(1)
- deep copy(1)
- memo(1)
- for ~ of(1)
- netlify(1)
- 이진탐색트리(1)
- 투두리스트(1)
- function(1)
- 정규표현식(1)
- 로그인(1)
- 웹 접근성(1)
- Pure Recursion(1)
- virtual DOM(1)
- scss(1)
- destructuring(1)
- object(1)
- timeout(1)
- organization(1)
- 2022 Kakao Tech Internship(1)
- 시맨틱태그(1)
- dll(1)
- firestore(1)
- import(1)
- 백엔드(1)
- 호출 스택(1)
- weatherAPI(1)
- 기준점 간 이동(1)
- cleanup function(1)
- 선택 정렬(1)
- 비동기식처리(1)
- npm(1)
- instance(1)
- POST(1)
- ReactDOM(1)
- querySelector(1)
- 라이브러리(1)
- 프레임워크(1)
- INSERT(1)
- React Hooks(1)
- default parameter(1)
- Symbol(1)
- merge(1)
- linux(1)
Section 4. useState
state를 업데이트 하려고 할 때 이전 상태에 의존하고 있으면 그 내용이 대체될 수 있으므로 이전 상태를 유지하면서 바뀐 부분만 수정되게 해야 한다.두 가지 방식이 있는데 두 번째 방식이 더 좋다. 항상 최신 상태의 스냅샷에서 작업할 수 있도록 하는 좀 더 안전한 방
useMemo, useCallback
React.memo: 의존하는 상태가 없는 변수가 불필요하게 렌더링 되는 것 막음.useMemo: 함수가 불필요하게 렌더링되는 것 막음. 특정 함수의 결과값을 저장하고, 해당 값이 변경되지 않으면 이전에 계산된 값을 재사용한다. (값을 기억함) 이를 통해 동일한 계산을
Reducer
React Context API는 React에 내장된 상태 관리 솔루션이다. Redux는 외부 라이브러리로, Context API와 유사한 역할을 한다. Redux를 이해하기 위해 먼저 Reducer가 뭔지 알아보아야 한다. Reducer는 상태 관리를 위한 "패턴"이
React Router
📌 React Router 페이지 이동을 도와주는 라이브러리 정확히는 페이지를 이동하는 것이 아니라 같은 페이지에서 Router를 이용해 다른 컴포넌트들을 보여주는 것 뿐임. 설치 >버전 업그레이드 되면서 바뀌는 부분들은 React Router 사이트에서 확인하
# React Basics
React를 사용하려면 React와 ReactDOM이라는 라이브러리가 필요하다.React : UI를 만들기 위한 라이브러리ReactDOM : UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리.(실제 HTML 요소를 화면에 불러옴)참고 | react dom에 대
# React key concepts
모든 코드를 컴포넌트 라는 작은 단위로 쪼개고, 이들을 조합하여 사이트를 구성한다. 만들어둔 기능을 재사용할 때 코드들을 전부 복사&붙여넣기할 필요없이 그냥 컴포넌트들을 import 해서 사용하면 되기 때문에 매우 용이하다.(React 뿐만 아니라 Angular, Vu
# React Hooks
시작 전 참고 영상 React Hooks가 무엇인가? https://www.youtube.com/watch?v=yS-BU6eYUDE React Hooks 사용 예시 https://www.youtube.com/watch?v=sZDvByH2mNU 📌 React Hook
# gh pages
gh-pages : 결과물을 github pages에 업로드할 수 있음. gh-pages 설치 최적화 페이지 주소 만들기 package.json 파일 하단에 아래 문구 추가 (git remote -v 로 리포지토리 이름 확인할 수 있음.) deploy, pre
# React Router
페이지 전환을 위해 필요함. Router 종류 Browser Router : 보통의 웹사이트처럼 생겼음. Hash Router보다 자주 사용함. Hash Router : 뒤에 # 등을 붙임. 형태 path로 주소 경로 설정할 수 있음. / 는 현재 페이지 그 뒤
# Effects
state가 변화하면 모든 component가 Re render된다. Re render 될 때마다 코드를 다시 실행하지 않고, 처음 render 될 때만 코드 실행하고 싶음. ex. API 불러올 때 : 처음 한번만 불러오면 됨. state가 변화할 때마다 다시 가져올
# Props
props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 필요한 상황 : 중복되는 디자인의 여러 버튼 생성(저장 버튼, 삭제 버튼, 수정 버튼 등) -> 컴포넌트를 하나만 만들어서 재사용하고 텍스트를 다르게 활용. 다르게 설정한 pro
# state
state : 데이터가 저장되는 곳 바닐라JS는 데이터가 바뀔 때마다 전체를 업데이트하지만, React는 바뀐 부분만 인지해서 업데이트 함. 핵심: 데이터(state)가 바뀔 때마다 React가 바뀐 값을 가진 컴포넌트를 리렌더링 하고 UI를 refresh한다. J
# Basics of React
📌 React는 무엇을 도와주는가? 왜 사용하는가? >### React는 UI를 interative 하게 만들어준다. 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함 미리 만들어 놓은 조각을 다시 사용할 수 있어