# useState
React Hook, useState
React 버전 16.8부터 새롭게 추가된 기능으로, Hook을 이용하면 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있다.Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook
[개인공부]리액트 useState
오랜만에 포스팅! 한동안 일이 바뻐서 스터디도 잘 못하고... 그랬는데 개천절인김에 오랜만에 포스팅 하려고 한다. 회사에서 리액트,넥스트,jsx,styled-jsx 등을 사용해서 프로젝트가 진행 되는것이 많다.하지만 나는 업무를 배분 하면서 그런 프로젝트에 팔로업이 안
[리액트] 3. 컴포넌트(2)
3. 컴포넌트 3-3. state(상태) state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 리액트에는 두 가지 종류의 state가 있다. 클래스형 컴포넌트가 지니고 있는 state이 있고, 함수 컴포넌트에서 useState 함수를 통해 사용할 수도 있다.
[React] UseState
데이터는변수에 넣거나state에 넣거나import {useState} from ‘react’let \[a,b] = useState(’딸기 먹고 싶다');→ a: 딸기 먹고 싶다, b: 이를 수정해주기 위한 함수변수에 안넣고 state에 넣는 이유? : 웹앱처럼 빠르게
setState는 한 번만 rendering 한다.(Automatic Batching)
팀원 중 한 분의 코드리뷰를 하던 참이었다. 근데 신경 쓰이는 부분이 있었다.
리액트 공식 문서 정리 - Hook 소개, useState(자세히), useEffect 맛보기, Hook 규칙
리액트 공식 문서 정리- hook 소개, useState 자세히, useEffect 맛보기, hook규칙
[리액트를 다루는 기술] React.memo와 함수형 setState를 이용해 의존성은 없애고 성능은 향상시키기
2500개의 데이터인 todos에 변화가 생기면 전체가 리렌더링 되어 성능저하'할 일 0' 체크하는데 한국인이라면 못 참을 렉이 걸림렌더링 시간도 50m는 뛰어갈 수 있는 328.7ms나 걸림그 이유는 '할 일 0'만 체크했는데 전체가 리렌더링 되기 때문. 의리 미쳤네
useState == 클로저?? || React Hooks useState의 동작원리
참고 https://ko.reactjs.org/docs/hooks-state.html https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Make-useSate-hook/ React Hook의 기본이자 가
리액트 하트 useState로 구현하기
useState 와 삼항연산자가 뭔지는 알겠는데 막상 구현하려고 하면 헷갈려서 기록에 남긴다.코드작성에 앞서 어떻게 구현할것인지 생각해보자.빈 하트를 만든다.빈 하트 클릭시 빨간 하트로 바뀐다.빨간 하트 클릭시 빈 하트로 바뀐다.그리고 2번을 하기 위해서는 클릭했을때
useState 와 useEffect
useState의 선언법은 변수를 배열로 현재값으로 사용할 변수와 그변수를 어떠한 값을 담아와서 앞의 변수에 적용시켜줄 함수를 담아 선언한후 그배열을 useState라는메소드 안에 인자로 현재값을 넣어준다.예를들어 대표적인 실행방법으로 카운트를 표시하는 박스를 하나만들
[react] 반복문의 useState
map 함수로 여행지 항목을 담은 detailList 가 있다.그리고 스켈레톤 ui를 적용시키기 위해 렌더링 상태를 loading state를 생성하여 관리하려했다. 하지만 이렇게 되면 개별적인 렌더링 상태를 구분할 수 없다.결국 <Link> 부분을 PointBo
Next.js sidebar 만들기
Youtube 클론코딩을 하면서 사이드 바를 만들어야 했는데, 다들 사이드 바를 만들 상황이 많을 거 같아서 제가 사용한 방법이 참고가 되었으면 합니다. 열린 사이드 봐와 닫힌 사이드 바 컴포넌트 각각 만들기 그림과 같이 열렸을 때의 사이드 봐와 닫혔을 때의 사이드