profile
Developer's High
태그 목록
전체보기 (47)React(11)hook(5)TIL(3)노션클론코딩(3)이터레이터(3)함수형프로그래밍(3)제너레이터(3)this(2)scss(2)모듈(2)Sass(2)async(2)ES6(2)CSS(2)CSR(2)SSR(2)자료구조(2)트라이(2)알고리즘(2)spa(2)프론트엔드(2)React.memo(1)eventLoof(1)확장성(1)DOMTree(1)virtual DOM(1)회고(1)component(1)variable(1)클론코딩(1)package(1)추상화(1)githubpages(1)API(1)push(1)이벤트루프(1)스코프(1)flex box(1)bind(1)호이스팅(1)transform(1)prop-types(1)프로미스(1)event flow(1)낙관적 업데이트(1)코딩테스트(1)optimization(1)객체지향과프로토타입(1)함수형 프로그래밍(1)웹스토리(1)브라우저(1)vue(1)FetchAPI(1)open source(1)트리(1)throttle(1)debounce(1)Firebase(1)HistoryAPI(1)capturing(1)await(1)storybook(1)이진트리(1)useEffect(1)useState(1)ajax(1)ux(1)UI컴포넌트(1)network(1)Flex(1)JavaScript(1)UI(1)Debouncing(1)craco(1)frontend(1)layout(1)섹션스토리지(1)유니코드(1)프로미스 객체(1)XSS(1)cli(1)filter(1)Breadcrumb(1)commit(1)쿠키와세션(1)React.children(1)useMemo(1)DOM(1)Attachment(1)parser(1)로직분리(1)html(1)clone(1)구조분해할당(1)useCallback(1)그리디(1)script(1)렌더링(1)데브코스(1)로컬스토리지(1)painting(1)데이터타입(1)memory(1)CDN(1)custom hook(1)spread operator(1)Fetch(1)parse()(1)style(1)Vercel(1)aws(1)IntersectionObserver(1)RenderTree(1)이진탐색(1)JSX(1)지연평가(1)CSSOM(1)vanillajs(1)변수(1)rendering(1)의존성(1)토큰(1)Token(1)선언적 프로그래밍(1)중첩(1)columns(1)bubbling(1)grid(1)closure(1)캐치(1)emotion(1)add(1)netlify(1)노션(1)contextAPI(1)scope(1)apply(1)call(1)git(1)svelte(1)tag(1)crypto(1)정규표현식(1)
post-thumbnail

Context API

컴포넌트간의 데이터를 교환하기 위해서는 props를 이용해야 한다. 그런데 만약에 이런식으로 부모 컴포넌트가 아닌 부모의 부모 컴포넌트로 올라간다던지 자식의 자식 컴포넌트로 데이터를 전달할때에는 전달방법이 귀찮아진다.그림에서 보면 2번만 거치면 되지만 만약에 10번을

2021년 10월 17일
·
0개의 댓글
post-thumbnail

React.Children

여기서 Box컴포넌트가 Parent 컴포넌트에서 인자로 받고 있는 children이다. 컴포넌트 태그 의 자식 컴포넌트 혹은 태그로 들어오는 값을 받을 수 있다. 이런 코드를 작성했다고 했을때 Component가 인자로 받는 것은 다음과 같다.기본적을 children

2021년 10월 13일
·
0개의 댓글
post-thumbnail

Custom Hook

Custom Hook은 기존의 다른 Hook들을 사용할수 있으면 정말 별거 없이 사용 할수 있다.여기서 겹치는 것들이 아주 많다. useState에서 뽑아온 상태가 useCallback에서 그대로 사용되었다. 이게 custom hook이다. 별거 없이 기존의 hook에

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useCallback

useCallback은 콜백 함수를 기억해야 할때 쓰입니다.위에 코드를 간단하게 보면 App컴포넌트는 ChildComponent와 DummyComponent를 자식 컴포넌트로 가지고 있고 ChildComponent에게는 콜백함수 와 state를 전달해주고 DummyCo

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useMemo && React.memo

자신의 상태가 변경될때부모로 부터 받은 props가 변경될때부모의 상태가 변경될때이런식으로 부모 컴포넌트가 자식 컴포넌트에게 연산이 큰 props와 변화가 잦은 props 두가지를 전달한다고 했을때 변화가 잦은 props가 변할때마다 자식 컴포넌트는 다시 렌더링이 된다

2021년 10월 8일
·
0개의 댓글
post-thumbnail

Style

css를 따로 스타일시트로 분리하지 않고 자동적으로 컴포넌트 내부에서 쓸수 있게 해주는 라이브러리 react 내부에서 동작하도록 만들어주는 라이브러리로 위에 코드 처럼 css를 각 컴포넌트마다 관리할수 있도록 스타일을 제공해준다. Vue에서 template 태그, sc

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useRef

useRef의 기본적인 기능은 고유의 값을 저장하는 것이다. 만약 태그에 사용된다면 해당 엘리먼트를 참조할수 있다. 인자로 받는 값은 useState와 동일하게 초기값이다.useRef는 React내부에서 생성된 객체이며 해당 객체는 값을 저장하는 것이 아니라 특정 메모

2021년 10월 6일
·
0개의 댓글
post-thumbnail

useEffect 와 Hook

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

2021년 10월 6일
·
0개의 댓글
post-thumbnail

useState

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

2021년 10월 6일
·
0개의 댓글
post-thumbnail

prop-types

컴포넌트로 내려주는 정보를 prop이라고 한다.이때 prop의 타입을 체크해줄수 있는 라이브러리는 prop-types이다.React 15버전 이전에는 import React from 'react'를 통해서 거기에 포함된 prop-types를 가져올수 있었지만 지금은 p

2021년 10월 6일
·
0개의 댓글
post-thumbnail

JSX

JSX는 화면에 렌더링 될 요소들을 생성하는 것으로 html처럼 생겼다. 특징으로는 내부에 {}으로 감싸진 표현식을 작성할수 있다.{}으로 감싸진 표현식은 태그 내부의 컨텐츠와 속성으로도 사용할수 있다. 여기서 특이한 점은 class를 className으로 사용하는데

2021년 10월 6일
·
0개의 댓글