(~˘▾˘)~♫❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞•*¨*•.¸¸♪
태그 목록
- 전체보기(154)
- TIL(99)
- JavaScript(60)
- React(30)
- web(28)
- react.js(24)
- 알고리즘(23)
- 코드카타(23)
- algorithm(22)
- codekata(22)
- CSS(14)
- html(10)
- DOM(9)
- 코어자바스크립트(8)
- js(7)
- WeCode(7)
- typescript(6)
- API(6)
- array(5)
- component(4)
- clone(4)
- review(4)
- git(4)
- SSR(3)
- hooks(3)
- next.js(3)
- Event Handler(3)
- clone project(3)
- seo(3)
- 자바스크립트(3)
- Sass(3)
- this(2)
- 타입스크립트(2)
- promise(2)
- styled components(2)
- pre-rendering(2)
- useEffect(2)
- useState(2)
- http(2)
- Database(2)
- 주니어개발자(2)
- routing(2)
- CS(2)
- await(2)
- framework(2)
- jquery(2)
- bootstrap(2)
- 신입개발자(2)
- 웹팩(2)
- webpack(2)
- sourcetree(2)
- Query String(2)
- MVC(2)
- async(2)
- 클론코딩(2)
- library(2)
- mobx(2)
- 클래스(1)
- terminal(1)
- ES6(1)
- rebase(1)
- datastructure(1)
- 비전공자(1)
- Flexbox(1)
- callback(1)
- 동적라우팅(1)
- Function Component(1)
- Directory(1)
- MVC패턴(1)
- Class Component(1)
- mockdata(1)
- scroll event(1)
- i18n(1)
- Flag(1)
- 개발자 도구(1)
- setter(1)
- pagination(1)
- 무한스크롤(1)
- 데이터타입(1)
- 코드리뷰(1)
- Code Review(1)
- browser(1)
- authentication(1)
- interface(1)
- 심볼(1)
- 피드백(1)
- data(1)
- Conference(1)
- 프로토타입(1)
- infinite scroll(1)
- ReactRouter(1)
- Restful(1)
- mock(1)
- authorization(1)
- 부트캠프(1)
- 콜백함수(1)
- sorting(1)
- parameter(1)
- 호이스팅(1)
- throttle(1)
- debounce(1)
- 비동기처리(1)
- react i18next(1)
- 2020(1)
- 개발문화(1)
- 앵귤러(1)
- DevTools(1)
- 실행컨텍스트(1)
- 라우팅(1)
- retrospect(1)
- 전역상태관리(1)
- Aquery(1)
- project review(1)
- mansonry(1)
- google map(1)
- project reveiw(1)
- searchbar(1)
- 검색창(1)
- 검색결과페이지(1)
- ordering(1)
- faker.js(1)
- data fetching(1)
- module bundler(1)
- mobx-react-lite(1)
- 여성개발자컨퍼런스2020(1)
- if(kakao)(1)
- 리액트라이브러리(1)
- 다국어처리(1)
- 객체 프로퍼티(1)
- 프로퍼티 플래그(1)
- Object.defineProperties(1)
- Object.getOwnPropertyDescriptors(1)
- weakset(1)
- weakmap(1)
- prevent scroll(1)
- 스크롤 막기(1)
- reveal2020(1)
- react-modal(1)
- tech conference(1)
- tagged templates(1)
- opp(1)
- protocol(1)
- modeling(1)
- classList(1)
- @property(1)
- mock data(1)
- hosting(1)
- kakao(1)
- 브라우저(1)
- redux(1)
- decorator(1)
- frontend(1)
- Angular(1)
- react native(1)
- linux(1)
- refactoring(1)
- 클로저(1)
- reactjs(1)
- 번역(1)
- 개발자(1)
- github(1)
- 카카오(1)
- npm(1)
- cli(1)
- Map(1)
- 프레임워크(1)
- 스코프(1)
- class(1)
- shell(1)
- Flux(1)
- google(1)
- developer(1)
- 프론트엔드(1)
- 보안(1)
- hook(1)
- Symbol(1)
- getter(1)
- stack(1)
- queue(1)
- closure(1)
- 배열(1)
- domain(1)
- State(1)
- useRef(1)
- Prototype(1)
- json(1)
- 위코드(1)
- axios(1)
- ajax(1)
- tuple(1)
- set(1)
- function(1)
- method(1)
- 디자인패턴(1)
- Expo(1)
- 컨퍼런스(1)
전체보기 (154)TIL(99)JavaScript(60)React(30)web(28)react.js(24)알고리즘(23)코드카타(23)algorithm(22)codekata(22)CSS(14)html(10)DOM(9)코어자바스크립트(8)js(7)WeCode(7)typescript(6)API(6)array(5)component(4)clone(4)review(4)git(4)SSR(3)hooks(3)next.js(3)Event Handler(3)clone project(3)seo(3)자바스크립트(3)Sass(3)this(2)타입스크립트(2)promise(2)styled components(2)pre-rendering(2)useEffect(2)useState(2)http(2)Database(2)주니어개발자(2)routing(2)CS(2)await(2)framework(2)jquery(2)bootstrap(2)신입개발자(2)웹팩(2)webpack(2)sourcetree(2)Query String(2)MVC(2)async(2)클론코딩(2)library(2)mobx(2)클래스(1)terminal(1)ES6(1)rebase(1)datastructure(1)비전공자(1)Flexbox(1)callback(1)동적라우팅(1)Function Component(1)Directory(1)MVC패턴(1)Class Component(1)mockdata(1)scroll event(1)i18n(1)Flag(1)개발자 도구(1)setter(1)pagination(1)무한스크롤(1)데이터타입(1)코드리뷰(1)Code Review(1)browser(1)authentication(1)interface(1)심볼(1)피드백(1)data(1)Conference(1)프로토타입(1)infinite scroll(1)ReactRouter(1)Restful(1)mock(1)authorization(1)부트캠프(1)콜백함수(1)sorting(1)parameter(1)호이스팅(1)throttle(1)debounce(1)비동기처리(1)react i18next(1)2020(1)개발문화(1)앵귤러(1)DevTools(1)실행컨텍스트(1)라우팅(1)retrospect(1)전역상태관리(1)Aquery(1)project review(1)mansonry(1)google map(1)project reveiw(1)searchbar(1)검색창(1)검색결과페이지(1)ordering(1)faker.js(1)data fetching(1)module bundler(1)mobx-react-lite(1)여성개발자컨퍼런스2020(1)if(kakao)(1)리액트라이브러리(1)다국어처리(1)객체 프로퍼티(1)프로퍼티 플래그(1)Object.defineProperties(1)Object.getOwnPropertyDescriptors(1)weakset(1)weakmap(1)prevent scroll(1)스크롤 막기(1)reveal2020(1)react-modal(1)tech conference(1)tagged templates(1)opp(1)protocol(1)modeling(1)classList(1)@property(1)mock data(1)hosting(1)kakao(1)브라우저(1)redux(1)decorator(1)frontend(1)Angular(1)react native(1)linux(1)refactoring(1)클로저(1)reactjs(1)번역(1)개발자(1)github(1)카카오(1)npm(1)cli(1)Map(1)프레임워크(1)스코프(1)class(1)shell(1)Flux(1)google(1)developer(1)프론트엔드(1)보안(1)hook(1)Symbol(1)getter(1)stack(1)queue(1)closure(1)배열(1)domain(1)State(1)useRef(1)Prototype(1)json(1)위코드(1)axios(1)ajax(1)tuple(1)set(1)function(1)method(1)디자인패턴(1)Expo(1)컨퍼런스(1)
TIL 62 | 클래스형 컴포넌트인 로그인 페이지를 함수형 컴포넌트로 바꿔보자 ( Hooks & styled-component)
아직 익숙하지 않은 훅스 개념을 직접 코드로 쳐보면서 익혀보자. 3주 전에 만들었던 Instagram 로그인페이지를 Hooks를 사용해서 functional 컴포넌트로 바꿔보고 styled-component를 적용해서 새로 작성해보았다.
2020년 10월 4일
·
2개의 댓글
TIL 59 | Hooks (useState, useEffect)
참고자료 : React Hooks 공식문서, 함수형 컴포넌트, 클로저, useState함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수이다.
2020년 10월 2일
·
0개의 댓글