React A to Z

\#Hello

react A to Z

1) BABEL2) multi Element멀티 Element 생성하기Fragment -> React.Fragment or <></>3) 리액트의 리랜더링

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.Hooks가 제공하는 내장 API에는 useEffect와 useSt

스토리 (Story): 스토리는 개별 컴포넌트에 대한 시각적인 표현입니다. 스토리북에서 각 스토리는 특정 상태나 속성을 갖는 컴포넌트의 인스턴스입니다. 예를 들어, 버튼 컴포넌트의 "기본 상태", "활성 상태", "비활성 상태" 등의 다양한 스토리를 만들 수 있습니다.

업로드중..React Hook은 React 16.8 버전부터 도입된 개념으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 이전에는 클래스 컴포넌트에서만 상태를 관리하고 생명주기 메서드를 사용할 수 있었지만, H

state는 업데이트 할 때마다 랜더링이 된다. 즉 한문자를 넣을때 마다 계속해서 update 가 일어난다.그러면 어떻게 변경해줘야 할까??heavyWork라는 함수가 첫 화면을 랜더링 할때만 불려지게 한다. 그렇게 하려면 초기값을 넣는 인자에 콜백을 넣어준다.결론적으

어떤 컴포넌트가 마운트 되었을때, 업데이트 될때, 마운트 해제되었을떄 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 됩니다.useEffect 훅은 인자로 콜백함수를 받습니다. 콜백함수란 다른 함수의 인자로 전달 된 함수를 의미합니다. 콜백함

1.화살표 함수 정리하기

Optimization 최적화useMemo와 useCallback이 있다.Memo -> Memoization 뜻함동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음 값을 계산할때 메모리에 저장해서 필요할때 마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사