'과연 이게 최선일까?' 끊임없이 생각하기
태그 목록
- 전체보기(282)
- DFS(8)
- 완전탐색(4)
- this(4)
- Sort(4)
- splice(3)
- queue(3)
- 재귀(3)
- BFS(3)
- stack(3)
- useEffect(3)
- useState(2)
- API(2)
- tailwind(2)
- toggle(2)
- ESLint(2)
- &&(2)
- useInterval(2)
- combination(2)
- useMemo(2)
- Que(2)
- 발상의 전환(2)
- hash(2)
- CRUD(2)
- greedy(2)
- 리팩토링(2)
- dynamic array(2)
- setInterval(2)
- setTimeout(2)
- reduce(2)
- getter(2)
- react-query(2)
- Binary Search(2)
- 생명주기(1)
- 시각화(1)
- Compound Components pattern(1)
- 이중 포인터(1)
- google(1)
- 일단그대로만들기(1)
- apply(1)
- call(1)
- mutaionObserver(1)
- git(1)
- 503(1)
- test(1)
- canvas(1)
- withCount(1)
- Mocking(1)
- 버그(1)
- corona(1)
- search(1)
- routing(1)
- kwargs(1)
- function(1)
- undefined(1)
- heroku(1)
- dic(1)
- mixin(1)
- Fiber(1)
- path parameter(1)
- scss(1)
- destructuring(1)
- cors(1)
- webvitals(1)
- component(1)
- next image(1)
- done(1)
- Pivot(1)
- min-width(1)
- promise(1)
- every(1)
- swr(1)
- H Index(1)
- LCP(1)
- WILDCARD(1)
- history API(1)
- 순수함수(1)
- prisma(1)
- contains()(1)
- Content-Type(1)
- absolute(1)
- ORM(1)
- caching(1)
- relative(1)
- 고딩때의 추억(1)
- GET(1)
- POST(1)
- makeStyles(1)
- 프로그래머스(1)
- debugger(1)
- static path(1)
- alias(1)
- slug(1)
- OOP(1)
- merge(1)
- next js 공홈 짱!(1)
- restful api(1)
- DNS(1)
- bind(1)
- customState(1)
- stackoverflow(1)
- createStyles(1)
- IAM(1)
- 선언형 방식(1)
- smoking test(1)
- happy path(1)
- heap(1)
- 스켈레톤(1)
- 개발자 vibe(1)
- commands(1)
- NOT(1)
- Request(1)
- 약수의 갯수(1)
- srcset(1)
- boolean(1)
- mocks(1)
- custom render(1)
- Namespace(1)
- findIndex(1)
- fibonacci(1)
- memoization(1)
- 함수형 컴포넌트(1)
- cypress(1)
- quick(1)
- 개발자직업병(1)
- vmin(1)
- 응집도(1)
- nth-of-type(1)
- Thinking in React(1)
- notifyOnChangeProps(1)
- jsconfig.json(1)
- variables(1)
- Helper(1)
- sortable(1)
- reconciliation(1)
- beforeunload(1)
- Module(1)
- 무식하게(1)
- dijkstra(1)
- 라우팅(1)
- MVC(1)
- Trie(1)
- 뿌듯(1)
- beautifulsoup(1)
- CLS(1)
- navigate(1)
- 해쉬(1)
- throttle(1)
- debounce(1)
- HistoryAPI(1)
- capturing(1)
- BLOGGING(1)
- Object.assign(1)
- "for 와 recursive의 조화(1)
- high order function(1)
- Prototype(1)
- await(1)
- sizes(1)
- cachememory(1)
- nth-child(1)
- skeleton(1)
- compose(1)
- loader(1)
- waitForElementToBeRemoved(1)
- try/except(1)
- rules of hooks(1)
- 일단돌아가야..ㅋ(1)
- Statement(1)
- wait()(1)
- async(1)
- rstrip(1)
- 다시 만들기(1)
- return(1)
- escape(1)
- class(1)
- for(1)
- State and Lifecycle(1)
- cmd(1)
- bubble(1)
- JavaScript(1)
- singly linked list(1)
- render_template(1)
- useParams(1)
- pagination(1)
- 고차함수(1)
- Higher-order Function(1)
- JSX ELEMENT(1)
- Call By Reference(1)
- 신뢰자산(1)
- progress(1)
- unshift(1)
- 신속정확(1)
- span(1)
- div(1)
- nested for loop(1)
- auto-complete(1)
- d.ts(1)
- react testing library(1)
- error(1)
- wrap(1)
- If_Else(1)
- ec2(1)
- documentFragment(1)
- mini project(1)
- json(1)
- drag and drop(1)
- 크루스칼(1)
- const(1)
- replace(1)
- 맴버변수(1)
- 식도염(1)
- 사실성장(1)
- visible(1)
- format(1)
- Prime(1)
- diffing(1)
- componentWillUnmount()(1)
- 다중 정렬(1)
- expression(1)
- CS(1)
- End to End Test(1)
- filter(1)
- props.children(1)
- z-index(1)
- debugging(1)
- Hash brown 맛있겠다(1)
- new Intl(1)
- ARP(1)
- delete(1)
- build error(1)
- mixitup(1)
- 클린코드(1)
- base_url(1)
- 부분집합(1)
- jquery(1)
- 투자(1)
- Group(1)
- media query(1)
- RAM(1)
- State(1)
- useReducer(1)
- useRef(1)
- LILO(1)
- vite(1)
- sqlite(1)
- global(1)
- 응급상황(1)
- DOM(1)
- query paramter(1)
- DB 설계(1)
- good_job(1)
- global style(1)
- PriorityQueue(1)
- styled(1)
- styled components(1)
- memory leakage(1)
- Design Pattern(1)
- 칭찬(1)
- hook(1)
- useCallback(1)
- MSW(1)
- act(1)
- fixtures(1)
- Derived State(1)
- CustomHook(1)
- 꼭꼭 숨어라 머리카락 보일라(1)
- 이중포문(1)
- double bang(1)
- CSR(1)
- SSR(1)
- github-issues(1)
- 콜트짱!(1)
- preventDefault(1)
- 최대약수(1)
- localstorage(1)
- Pop(1)
- 오류(1)
- inline(1)
- shield.io(1)
- transition(1)
- split()(1)
- max(1)
- f-string formatting(1)
- CustomEvent(1)
- object-relational-database(1)
- tryCatch(1)
- animation-fill-mode(1)
- setter(1)
- extends(1)
- regexp(1)
- Fetch(1)
- submit(1)
- dict(1)
- addEventListener(1)
- supabase(1)
- 삽질(1)
- layer(1)
- doubly linked list(1)
- Delegation(1)
- LIFO(1)
- jest(1)
- MAX_PAGE(1)
- change event(1)
- HoC(1)
- enabled(1)
- useLocation(1)
- github(1)
- 오히려좋아(1)
- 컨벤션(1)
- dash(1)
- FID(1)
- 인형뽑기(1)
- random(1)
- FLOOR(1)
- seo(1)
- lazy(1)
- validator(1)
- JSX(1)
- Flask(1)
- express(1)
- super excited(1)
- auto fit(1)
- auto fill(1)
- useNavigate(1)
- dblclick(1)
- life cycle(1)
- debug(1)
- Map(1)
- @BeforeEach(1)
- 그래프(1)
- Then(1)
- new Date(1)
- spyon(1)
- withStyle(1)
- data set(1)
- clean-up(1)
- Props(1)
- Content(1)
- min(1)
- 데이터 분석(1)
- dispatchEvent(1)
- single source of truth(1)
- plotly(1)
- csv(1)
- bubbling(1)
- color palette(1)
- pandas(1)
- grid(1)
- max-width(1)
- 나무(1)
- customElement(1)
- dynamic programming(1)
- closure(1)
- 좋은 개발자(1)
- Routes(1)
- github issue(1)
- emotion(1)
- 이름짓기(1)
- audio(1)
- set(1)
- react router(1)
- FCP(1)
전체보기 (282)DFS(8)완전탐색(4)this(4)Sort(4)splice(3)queue(3)재귀(3)BFS(3)stack(3)useEffect(3)useState(2)API(2)tailwind(2)toggle(2)ESLint(2)&&(2)useInterval(2)combination(2)useMemo(2)Que(2)발상의 전환(2)hash(2)CRUD(2)greedy(2)리팩토링(2)dynamic array(2)setInterval(2)setTimeout(2)reduce(2)getter(2)react-query(2)Binary Search(2)생명주기(1)시각화(1)Compound Components pattern(1)이중 포인터(1)google(1)일단그대로만들기(1)apply(1)call(1)mutaionObserver(1)git(1)503(1)test(1)canvas(1)withCount(1)Mocking(1)버그(1)corona(1)search(1)routing(1)kwargs(1)function(1)undefined(1)heroku(1)dic(1)mixin(1)Fiber(1)path parameter(1)scss(1)destructuring(1)cors(1)webvitals(1)component(1)next image(1)done(1)Pivot(1)min-width(1)promise(1)every(1)swr(1)H Index(1)LCP(1)WILDCARD(1)history API(1)순수함수(1)prisma(1)contains()(1)Content-Type(1)absolute(1)ORM(1)caching(1)relative(1)고딩때의 추억(1)GET(1)POST(1)makeStyles(1)프로그래머스(1)debugger(1)static path(1)alias(1)slug(1)OOP(1)merge(1)next js 공홈 짱!(1)restful api(1)DNS(1)bind(1)customState(1)stackoverflow(1)createStyles(1)IAM(1)선언형 방식(1)smoking test(1)happy path(1)heap(1)스켈레톤(1)개발자 vibe(1)commands(1)NOT(1)Request(1)약수의 갯수(1)srcset(1)boolean(1)mocks(1)custom render(1)Namespace(1)findIndex(1)fibonacci(1)memoization(1)함수형 컴포넌트(1)cypress(1)quick(1)개발자직업병(1)vmin(1)응집도(1)nth-of-type(1)Thinking in React(1)notifyOnChangeProps(1)jsconfig.json(1)variables(1)Helper(1)sortable(1)reconciliation(1)beforeunload(1)Module(1)무식하게(1)dijkstra(1)라우팅(1)MVC(1)Trie(1)뿌듯(1)beautifulsoup(1)CLS(1)navigate(1)해쉬(1)throttle(1)debounce(1)HistoryAPI(1)capturing(1)BLOGGING(1)Object.assign(1)"for 와 recursive의 조화(1)high order function(1)Prototype(1)await(1)sizes(1)cachememory(1)nth-child(1)skeleton(1)compose(1)loader(1)waitForElementToBeRemoved(1)try/except(1)rules of hooks(1)일단돌아가야..ㅋ(1)Statement(1)wait()(1)async(1)rstrip(1)다시 만들기(1)return(1)escape(1)class(1)for(1)State and Lifecycle(1)cmd(1)bubble(1)JavaScript(1)singly linked list(1)render_template(1)useParams(1)pagination(1)고차함수(1)Higher-order Function(1)JSX ELEMENT(1)Call By Reference(1)신뢰자산(1)progress(1)unshift(1)신속정확(1)span(1)div(1)nested for loop(1)auto-complete(1)d.ts(1)react testing library(1)error(1)wrap(1)If_Else(1)ec2(1)documentFragment(1)mini project(1)json(1)drag and drop(1)크루스칼(1)const(1)replace(1)맴버변수(1)식도염(1)사실성장(1)visible(1)format(1)Prime(1)diffing(1)componentWillUnmount()(1)다중 정렬(1)expression(1)CS(1)End to End Test(1)filter(1)props.children(1)z-index(1)debugging(1)Hash brown 맛있겠다(1)new Intl(1)ARP(1)delete(1)build error(1)mixitup(1)클린코드(1)base_url(1)부분집합(1)jquery(1)투자(1)Group(1)media query(1)RAM(1)State(1)useReducer(1)useRef(1)LILO(1)vite(1)sqlite(1)global(1)응급상황(1)DOM(1)query paramter(1)DB 설계(1)good_job(1)global style(1)PriorityQueue(1)styled(1)styled components(1)memory leakage(1)Design Pattern(1)칭찬(1)hook(1)useCallback(1)MSW(1)act(1)fixtures(1)Derived State(1)CustomHook(1)꼭꼭 숨어라 머리카락 보일라(1)이중포문(1)double bang(1)CSR(1)SSR(1)github-issues(1)콜트짱!(1)preventDefault(1)최대약수(1)localstorage(1)Pop(1)오류(1)inline(1)shield.io(1)transition(1)split()(1)max(1)f-string formatting(1)CustomEvent(1)object-relational-database(1)tryCatch(1)animation-fill-mode(1)setter(1)extends(1)regexp(1)Fetch(1)submit(1)dict(1)addEventListener(1)supabase(1)삽질(1)layer(1)doubly linked list(1)Delegation(1)LIFO(1)jest(1)MAX_PAGE(1)change event(1)HoC(1)enabled(1)useLocation(1)github(1)오히려좋아(1)컨벤션(1)dash(1)FID(1)인형뽑기(1)random(1)FLOOR(1)seo(1)lazy(1)validator(1)JSX(1)Flask(1)express(1)super excited(1)auto fit(1)auto fill(1)useNavigate(1)dblclick(1)life cycle(1)debug(1)Map(1)@BeforeEach(1)그래프(1)Then(1)new Date(1)spyon(1)withStyle(1)data set(1)clean-up(1)Props(1)Content(1)min(1)데이터 분석(1)dispatchEvent(1)single source of truth(1)plotly(1)csv(1)bubbling(1)color palette(1)pandas(1)grid(1)max-width(1)나무(1)customElement(1)dynamic programming(1)closure(1)좋은 개발자(1)Routes(1)github issue(1)emotion(1)이름짓기(1)audio(1)set(1)react router(1)FCP(1)
React Hook - useEffect
useEffect를 이용해 componentDidMount를 구현해보자 Hook중에 useEffect라는 함수가 있다. 이는 함수컴포넌트가 랜더링될때마다 실행되는 함수로 클래스 컴포넌트의 componentDidMount와 유사하다.(랜더링 될때마다 실행되므로 함수컴포넌트 최초 실행시에도 실행된다.) 그럼 간단하게 useEffect를 통해서 movie api를 호출한다음 title을 랜더링 해보도록 하자. dropdown을 select로 구현한다음 숫자를 선택하면 그에 해당되는 스타워즈 영화의 제목이 나오도록 했다. 참고로, useEffect를 사용할때는 무언가 리턴이 되는 함수를 사용하면 안된다. 따라서 arrow 함수안에 또다시 함수를 만들어서 사용했다. 그러나 요렇게 코드짜면, 문제가 생겨버린다. 어떤 문제일까??... 바로 그 유명한 stackOverFlow가 생긴다ㅋㅋ. setNumber가 실행되면서 랜더링되고 useEffect가 실행되면서 setM
2022년 2월 18일
·
0개의 댓글·
0