React

useMemo hook? 이전에 사용된 값을 재사용하는 방식 주로 Component성능을 최적화할 때 사용 예를 들면 input에 값을 입력할 때, onChange이벤트를 발생시키면 input내부의 상태가 바뀌는데, 이때 리렌더링이 발생. 문제는 다른 바뀔 필요가 없는 것도 같이 바뀌어버림 이때, useMemo를 사용하게 되면 값이 바뀌지 않으면 리렌더...

useCallback Hook? 이전에 만들었던 이벤트 핸들러 함수를 재사용하는 것 useMemo와 비슷하지만, 함수를 위한 Hook Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 함 useCallback은 함수를 재사용하도...

React.memo를 사용하면 Props가 바뀌었을때만 리렌더링 해줌 렌더링된 결과물을 재사용할 수 있음 이렇게 선언만 해주면 됨 만약 하나의 파일에 두 가지 함수가 들어가고 둘다 렌더링에 사용될 경우, 파일명과 겹치지 않는 함수에 처럼 const를 사용해 변수를 생성하고, React.memo안에 기존의 함수를 적어줌 이를 적용하기 위해서는, useC...

useReducer Hook? 상태 업데이트에 주로 썼던 useState 뿐만 아니라 useReducer로도 업데이트 가능 차이점 useState()에서는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 업데이트 useReducer()에서는 action을 기반으로 상태 업데이트, 업데이트 시 action참조 업데이트 시 참조하고 싶은 값이 있다면 di...

useState, useCallback같은 use로 시작해 import해서 사용하는 라이브러리들을 React Hook이라고 부르는데, 직접 Hook을 만들어볼 수 있음 조건: 파일명 앞에 use가 들어가야 함 예를 들어 useInputs라는 함수를 만들어보겠음 i

React를 공부하다보면 Component를 사용하기 때문에, props를 통해 여러 겹에 겹쳐서 값을 전달할 경우가 생김 마치 친구에게 지우개를 빌려달라고 했는데, 멀리 있다보니 친구가"야, 쟤가 지우개 좀 빌려달래 이거 좀 전해줘." 라고 몇 명에게 부탁해 그들을 거쳐서 나에게 도착하는 느낌 Context API를 사용하면 마치 사람을 거치지 않고 ...

Component를 리렌더링하고 최적화 할때, 불변성이 유지되어야 함 다음과 같은 객체에서 이런식으로 바꾸게 되면 불변성이 깨짐 따라서 만약에 678910이 b에 들어가는 객체를 만들고 싶으면, 새로운 객체를 만들어서 값을 새롭게 넣어줘야 함 이렇게 해야 obj의 값이 변경되지 않아서 좋음 배열같은 경우도 값을 삽입하는 push, 값을 빼는 spl...

styled-components? .js파일에 css를 넣을 수 있도록 해주는 편리한 라이브러리 (CSS-in-JS 라이브러리 라고 부른다고 함) 로 다운받을 수 있음 usage 다음처럼 .js파일에서 import 사용법은 위와 같음. 변수 안에 집어넣는데, .

API가 필요한 이유 React는 Front-end에서 사용 그 말은 즉, 데이터를 모두가 사용할 수 있게 저장할 수 없다는 것을 의미하고, 또 그것은 다른 사용자와의 데이터 공유가 이뤄질 수 없음을 의미 따라서 API Server를 구축해 쓰거나, 남이 만든 것을 가져와서 쓰면, 값을 조작할 경우 API Server가 갱신이 되면서, 같은 API Ser...

useEffect Hook React Component가 처음으로 화면에 나타나거나 사라질때 특정 작업가능 컴포넌트의 어떤 props의 상태가 바뀌어서 업데이트 될 때, 즉 리렌더링 될 때마다 호출되는 기능 사용하기 위해선 로 import를 먼저 진행해줘야 함 사용법은 위와 같은 형식인데 뒤에 []를 deps라고 부름 이 공간이 비어있으면 처음으로 화...

React Route yarn 먼저 react Route를 사용하려면 을 설치해줘야 한다.

subRoute? 라우트 안에 들어있는 또 다른 Route 사용법은 Route로 사용한 component안에서 Route를 또 쓰면 됨 이번 편은 velopert님 영상 참고 => 패스트 캠퍼스에서 수강가능 Profile.js파일을 만들고 다음과 같이 설정 지난 시간에 썼던 파라미터도 그대로 match.params를 통해 {username}에 불러왔고...

History 홈페이지를 뒤로 가기 하거나 뒤로 간 상태에서 앞으로 가기 등을 할 수 있는 이유는 히스토리가 남아있기 때문임 goBack()을 하면 뒤로가고 goForward()를 하면 앞으로, push()를 하면 정해진 url로 갈 수 있게 됨 Link로 어떤 url을 호출하게 되면, 해당 url로 이동시 렌더링 된 component에는 아무런 파라미...

withRouter? 다른 것들은 무조건 Link를 사용해서 해당 component를 렌더링 하지만, withRouter를 사용하면, 굳이 Link없이도 화면 렌더링이 가능해짐 WithRouterSample.js같은 아무이름으로 파일을 만들고 난 후, 으로 import 그 다음에, 다음처럼 코드 작성 보다시피, 매개변수로 location, match...

컴포넌트에서 보여줘야 하는 내용이 사용자의 입력값에 따라 바뀌어야 할때 사용Hook기능이 16.8 이후부터 도입되면서 함수형 컴포넌트에서도 state값의 변경에 대한 구현이 가능해짐카운터 프로그램을 예시로 들어보겠음 우선 눈여겨볼 점은 button에 onClick에 의

이틀 전에 썼던 useState()함수형 업데이트의 추가적인 부분을 적고자 한다.그를 위해선 먼저 useCallback, useMemo 등을 이용한 최적화에 대해서 먼저 이해하고 있어야 한다.https://velog.io/@johnque/useMemo-Hook

레거시 프로젝트(과거에 진행이 끝난 프로젝트)에 리액트를 도입하거나, 클래스 이름을 짓는 규칙을 정하기 힘들거나 번거로울 때 사용하면 편리한 기술먼저 JavaScript파일을 만들어준다.파일명.module.css로 CSS파일을 만든다.css를 작업한다.JS파일에 이를