React

[React] react-router-dom v6 에서 Hooks 사용하기

https://react.vlpt.us/react-router/ 5장. 리액트 라우터 · GitBook react-router 를 통한 리액트 싱글 페이지 애플리케이션 만들기 SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적 react.vlpt.us 위 글의 리액트 라우터 사용 과정을 따라가보려 했으나, 해당 글이 react-router-dom v5 기준으로 작성되어 현재 버전인 v6에서 쓰려고 보니 제대로 동작하지 않았다. 그래서 react-router-dom v6에서 업데이트된 Hooks 를 사용해 이전과 달라진 점을 체크하며 과정을 따라해보았다. * 과정을 따라하는 데에 체크가 필요한 사..

[React 공부] Context API 전역값 관리 & Immer 사용 불변성 관리

22. Context API 를 사용한 전역 값 관리 · GitBook 22. Context API 를 사용한 전역 값 관리 이번에 사용되는 코드는 다음 CodeSandbox 에서 확인 할 수 있습니다. 우리가 현재 만들고 있는 프로젝트를 보면, App 컴포넌트에서 onToggle, onRemove 가 구현이 되어 react.vlpt.us Context API 프로젝트의 상태, 함수, 외부 라이브러리 인스턴스, DOM까지도 관리 가능 - 새로운 Context 생성 const UserDispatch = React.createContext(null); - Context를 만들면 안에 들어있는 Provider라는 컴포넌트로 Context의 값을 정할 수 있음. 컴포넌트 사용 시 value라는 값을 설정해주면 ..

[React 공부] 클래스형 컴포넌트

회사에서는 기존 프로젝트를 유지보수하는 등의 상황이 생기면 클래스형 컴포넌트를 사용해야하는 경우가 있다. 요즘은 함수형 컴포넌트를 주로 사용하는 추세이지만, 그래도 공부해둘 필요가 있어보여 아래글을 따라가며 특징을 간단히 정리해보았다. 24. 클래스형 컴포넌트 · GitBook 24. 클래스형 컴포넌트 이제는 잘 사용하지 않지만, 그래도 클래스형 컴포넌트에 대해서 알아봅시다! 앞으로 이 강의에서 클래스형 컴포넌트를 사용하는 일은 거의 없겠지만 그래도 알아둘 필요 react.vlpt.us - render() 메서드가 꼭 있어야 함 - 렌더링하고 싶은 JSX 반환하면 됨 - props 조회는 this.props로 - defaultProps는 함수형컴포넌트와 똑같이 해도 되고, 클래스 내부에 static 키워..

[React 공부] 함수형 컴포넌트의 Hooks

아래글의 과정을 따라하며 필요한 내용 정리 1장. 리액트 입문 · GitBook 1장. 리액트 입문 알고보면 너무 쉽고 재밌고 편한 리액트, 한번 제대로 배워봅시다! react.vlpt.us useRef 1. 특정 DOM 선택 가능 2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리 useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트도 리렌더링 되는 것 X const a = useRef(4); a.current += 1; // 5 useMemo 특정 결과값을 재사용할 때 사용 첫번째 파라미터에는 객체를 반환하는 팩토리 함수를 넣어줘야 함. useMemo(() => { }, [ ]); useCallback 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 useMemo를 기반으로 만들어졌음 u..