# React Hooks

zerone

useMemo는 특정한 값을 반환함useCallback은 콜백 함수(메모이제이션된)를 다시 반환함메모이제이션된 콜백을 반환상태변화 처리 함수(onCreate, onEdit, onRemove)는 data state를 참조해야하기 때문에 App.jsx에서 생성해서 씀!

decay95

React를 사용해 프로그래밍을 하다 보면, 상위 Component의 상태를 하위 Component에 전달해야될 때가 있다.문제는 리액트 컴포넌트가 Tree 구조로 이뤄져있어, 목표 Component에 도달하기 위한 depth가 깊다면 필연적으로 props drilli

me-hana

버튼을 눌러 데이터를 받아와 여러 개의 CSV 파일로 다운로드 받아보자

godud2604

onConfirm 은 필수적인 사항이고, onCancel 은 필수적인 사항이 아닌 조건이므로 조건문을 추가하여 오류 방지.beforeunload는 window가 닫히기 전에 function이 실행되는 것을 허락한다.

godud2604

useEffect를 사용하여 html 안의 title 을 변경할 것이다.또 다른 방법으로는, react에서는 helmet를 사용한다. useEffect 가 mount 될 때, title 은 props으로 전달된 "New Title" 이 되는 것이다.

olzlel2000

const ref = useRef(value)이런식으로 useRef를 선언하면 ref의 객체를 반환해준다. 이 형태는 { current: value } 다. 그리고 이 변수는 언제든 바꿔줄 수 있다. 예를 들어, ref.current = "hello"이 값은 컴포넌트의

sysout-achieve

리액트로 구현 시 component의 라이프사이클과 캐싱하는 Tip 정리

godud2604

버튼에 따라 노출되는 내용을 변화시킬 수 있는 custom hook인 useTabs 에 대해여 정리해 볼 것이다.우선, tab을 클릭할 때 나타낼 content 배열 객체 형태로 정의하였다.useTabs는 initialTab, allTabs 두 개의 매개 변수를 갖고

godud2604

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는

ssjjyy

자바스크립트에서 태그에 접근할 때getElementById(), getElementsByClassName 등을 이용한다.이와 다르게 React에서는 Ref를 이용한다.그리고 Ref는 클래스 컴포넌트와 함수 컴포넌트에서 이용 방법이 서로 다르다.클래스 컴포넌트에서는 cr

dreamricher

lifecycle과 react hooks에 관한 내용 정리입니다.

jiaegong

라이프 사이클(클래스형 vs 함수형)리액트의 요소들은 여러 컴포넌트로 구성되어 있고, 컴포넌트는 모두 라이프 사이클을 가진다. 이전에는 클래스형 컴포넌트에서 라이프 사이클을 관리할 수 있었기 때문에, 주로 클래스형 컴포넌트를 사용했지만, react hooks로 라이프

jaejung0412

(판사님 저는 솔직히 키워드가 리액트 라우터인줄 알았어요..)리액트 숙련을 위해 달려온 4주차.. 솔직히 이번 주차 과제를 실패하긴 했다. 열심히 뭔가를 만들다가 어그러진 부분?솔직히 다음주차 과제가 너무 걱정된다. 몰입이란걸 제대로 해보고도 싶구요.. 정리할 부분라이

dbstjrwnekd

Hooks는 하위 호환성을 갖고 있습니다. 이번 포스팅에선 우리가 배워볼 hooks의 전반적인 개요를 살펴보겠습니다. 다음 포스팅부터 각각에 대해 자세히 알아볼 것입니다. State Hook 아래 예시는 counter를 렌더링합니다. 버튼을 클릭하면 값을 올려주죠.

dbstjrwnekd

React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습

lee_yesol421

오늘은 react hooks를 이용해 컴포넌트를 만드는 방법을 공부하고 혼자 실습해본 뒤 wepback을 설치했다. 지난주 react class로 구현한 부분을 hook로 다시 만들어보니 차이점을 잘 느낄 수 있었다. 다음 강의로 넘어가기 전 연습삼아 class로 만들

savin

useReducer useReducer 적용하기

chaeerim

오늘은 useTabs을 만들어 보면서 useState에 대한 공부를 마무리하고 useEffect로 넘어가보려 한다 ! 내가 선택한 section의 content만 보여주고 싶음. -> 즉 Section2 버튼을 누르면 자동으로 content가 "I’m the conte

savin

App.js에서 제목인 <h1> 태그를 Header 컴포넌트로 이동시킨다.시작하기 전에 Form 컴포넌트도 만들어주자. form 태그 부분만 컴포넌트로 구조화 안된 상태여서 매우 거슬림...Form.jsxcomponents 폴더에 Form.jsx 파일을 생성하고

savin

1. 할 일의 개수 표현 App.js