리액트 (16) 썸네일형 리스트형 ReactJS (17) Memo ReactJS에서는 기본적으로 리렌더링 되는 조건들이 몇 가지 있다 대표적으로는 state가 바뀔때, parent component가 렌더링이 될 때인데 이러한 렌더링 되는 조건들 때문에 state가 바뀌지 않아도 렌더링이 되어 성능저하가 되는 걸 겪을 수 있다 따라서 이런 불필요한 렌더링을 막기 위해 memo가 있고 memo 사용방법을 봐보자 예) 이렇게 component을 export 할 때 React.memo(component 이름)을 써주면 해당 component는 불필요한 렌더링을 안 하겠다는 표시이다 ReactJS (15) Ref ref는 component를 통해서 HTML element를 가져올 수 있다 예: video.play() , a.click() 이렇게 video , anchor HTML element를 갖고 와 작업을 하는 거라고 보면 된다 하지만 HTML element를 갖고 올 때마다 사용하는 건 아니고 DOM에 직접 접근해야 할 때만 ref를 사용한다 직접 접근해야 되는 경우는 state로 처리하기 힘들거나 다른 method 방법이 따로 없을 때 쓴다 예: 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기, 애니메이션, 3자 DOM library 활용 추가로 component에 이미 제공되고 있는 prop들을 활용해야 한다 예: Dialog component에서 isOpen p.. ReactJS (14) Recoil - Selector Recoil에서 selector은 atom을 갖고 와 작업하는데 쓰인다 그럼 바로 예시를 보자 예) 우선 Fruit atom을 만들어주고 default = 과일 이름들을 넣은 array이다 이후 selector은 key (고유식별자) 및 get을 통해 이미 만들어놓은 atom을 갖고 올 수 있다 예시와 같이 selector 안에서 fruits = get(Fruit)를 통해 Fruit atom을 갖고 왔다 여기서 get은 atom을 갖고 와 변형만 시켜준다 따라서 atom의 값은 변하지 않는다 이후 filter을 통해 Fruit atom을 변형시킨 걸 볼 수 있다 그다음에 useRecoilvalue()를 통해 selector을 불러왔다 이제 console을 확인해 보자 이렇게 배열이 나온 걸 볼 수 있다 .. ReactJS(13) useForm ReactJS에서 form 작업을 할 때 useForm hook을 사용하면 작업이 엄청 간편해진다 npm i react-hook-form 우선 다운을 하고 바로 예시를 보자 예) register(input 이름)은 input에 적용시켜서 다양한 event들을 받을 수 있고 (onChange, onBlur) 다른 작업들을 할 수 있다 예) useForm에서 handleSubmit은 input을 submit 했을 때 받을 수 있는 정보들을 보여준다 예시와 같이 onSubmit 함수를 만들어 handleSubmit을 form onSubmit props에 적용시킨 뒤 data를 console로 확인했더니 input 이름과 submit 한 정보를 볼 수 있다 이것뿐만 아니라 input에 더 많은 옵션들을 추가할 .. ReactJS (12) Recoil 예를 들어 Component1에 있는 정보를 Component6 한테 넘겨주고 싶다고 가정을 해보자 Component1과 component6 사이에는 component2 - component 5까지 연결이 되어있는데 정보를 넘겨주기 위해서는 prop을 이용해서 component1 -> component2 ->... -> component6 이런 식으로 한 component씩 prop을 사용해서 component6까지 넘겨줘야 한다 이렇게 하면 불필요한 props들을 넘겨줘야 하고 또 직접적으로 넘겨주지 못하기 때문에 귀찮아진다 이렇게 정보를 직접적으로 받고 쓰기 위해서 recoil을 쓴다 npm i recoil 다운을 하고 바로 예시를 보자 우선 recoil을 사용하기 전에 세팅을 해줘야 하는데 useQ.. ReactJS (11) useQuery useQuery는 fetching 할 때 매우 유용한 hook이다 npm i react-query React 버전이 18이면 react query를 못 불러오는 현상이 있어 npm i @tanstack/react-query 이 방식으로 react query를 다운로드 해야한다 이제 useQuery의 사용방법에 대해 알아보자 우선 시작하기 전에 useQuery 세팅을 해야 하는데 간단하다 QueryClient를 만들고 QueryClientProvider component (client props를 넣어줘야 된다)로 App component를 감싸면 된다 이렇게 해서 세팅을 마쳤다 다음으로 api에서 fetch를 해보자 이후 useQuery(고유식별자 다른 query와 고유식별자가 같으면 안 됨, fetch.. ReactJS (10) useRouteMatch useRouteMatch는 특정 url에 들어와 있는지 확인해 주는 hook이다 예) useRouteMatch를 사용할 때에는 () 안에 확인하고 싶은 url을 넣어주면 된다 예시에서는 first 페이지에 있는지 확인을 위해 /first를 넣어주었다 이후 console을 확인해 보면 현재 Second 페이지에 있기 때문에 null이라고 나오는 걸 확인할 수 있다 그럼 First 페이지로 가보면 뭐가 나오는지 한번 보자 이렇게 url에 대한 간단한 정보가 나오는 걸 확인할 수 있다 여기서 끝내긴 아쉬우니까 useRouteMatch를 통해 간단한 작업을 한번 해보도록 하자 우선 페이지에 들어가 있을 때 그 페이지의 Link의 색깔을 바꿔주도록 해보자 예) 우선 첫 번째로 secondMatch를 만들어주고 B.. ReactJS (9) useEffect ReactJS는 state가 변경될 때마다 component 안에 있는 모든 코드가 재실행된다 하지만 API를 호출하거나 중요한 작업을 할 때에는 component가 불려 올 때 한 번만 실행되는 걸 원하는 경우도 생긴다 그때 바로 useEffect를 사용한다 useEffect는 component가 처음 렌더링 될때만 실행되게 한다 그럼 사용방법을 알아보자 예) Click me button을 누를때마다 setValue를 통해 value 값을 1씩 더해주었다 console에 보면 component을 렌더링해 모든 코드들이 한 번씩 실행되는 걸 볼 수 있다 하지만 useEffect를 사용하면 state가 변경되어도 재실행이 되지 않아야 되는데 button을 몇 번 클릭해 보고 console을 다시 확인해 보.. 이전 1 2 다음
