React

컴포넌트는 하나의 태그만 반환해야한다. HTML처럼 사용하면된다. 다수의 태그를 반환하고 싶다면, tag로 감싸준다. (fragment) class를 사용하고 싶다면, className을 사용해야한다. 자바스크립트 코드를 작성할 수 있다. 단, {}로 묶어주어야한다.

스토리북 UI 컴포넌트를 모아서 문서화하고 보여주는 오픈소스툴이다. (Storybook is an open source tool for building UI components and pages in isolation.) 개발자는 컴포넌트를 스토리북에 등록해놓을 수 있

React의 Main Job은? 리액트의 main job은 ui를 rendering하는 것이고, 유저의 input에 react하는 것이다. 예를들어, App함수는 isLoggedIn의 state가 바뀔때마다, 리엑트에 의해 자동으로 재실행된다. 하지만 함수의 재실행을

React는 무엇인가? > React is a JavaScript library for building user interfaces 전통적인 웹사이트들은 request, respond 과정을 거친다. 많은 양의 html 파일을 request하는 경우, 새로운 페이지가

React Hooks의 등장 배경 React에서 컴포넌트를 만들기 위해 두 가지 방법이 있다. >1. Functional Components >2. Class-based Components Functional Component return을 통해서 무언가를 화면에 출력하는데에 제한되어 있었다.(props를 받고, JSX를 return) 내부 state를...

useState props이 변경되거나, 내부에서 갖고 있는 상태가 변경이 되면, react는 변경된 해당 컴포넌트 함수 전체를 다시 호출한다.

useMemo? 최적화를 위한 hook이다. 그렇다면 왜 최적화가 필요한 것일까?? > reminder : 다음과 같은 경우에 컴포넌트가 re rendering 된다. 자신의 state가 변경되는 경우 부모로부터 받은 props가 변경되는 경우 부모의 state가 변경되는 경우 버튼을 클릭할때마다, sum 함수가 호출이되고, n이 커지게 되면, 렌더...

useCallback? 컴포넌트가 rendering 된다는 것은 함수가 호출되는 것을 의미한다. 함수를 다시 호출하면, 연산도 다시 할 뿐만 아니라, 함수도 다시 정의된다. 다시 연산되는것을 막기 위해 useMemo를 사용했고, 함수가 다시 정의되는 것을 막기 위해 useCallback을 사용한다. App 컴포넌트에서 checkbox를 눌러 state를 ...

요구사항 Emoji 리스트를 보여준다 검색을 통해 필터링한다. Emoji를 클릭하면 복사한다. 이모지 데이터 링크 컴포넌트 구성 App.jsx Header 컴포넌트 SeachBox 컴포넌트 EmojiListItem 컴포넌트 EmojiList 컴포넌트

useRef를 쓰는 이유 DOM에 직접 접근하기 위해 지역변수로 사용하기 위해 useState는 state가 변화될때 re render되지만, useRef는 값이 변경되더라도 re render되지 않는다.

1. React Router를 왜 사용하는가? /home, /login와 같이 URL이 변경되면 보이는 컨텐츠의 내용도 변하게 된다. 새 컨텐츠를 가져오기 위해 새로운 HTTP 요청을 전송하고 응답을 받아야한다. 이 과정 중에 지연이 발생할 수 있고, UI를 저하시