PRDEN

1.React의 Router 1) useNavigate() 히스토리 남기지 않고 싶으면 replace: true import {useNavigate} from 'react-router-dom'; export default function App() { const navigate = useNavigate(); const handleClick = () => { // 👇️ replace set to true navigate('/about', {replace: true}); }; return ( Navigate to About ); } 2) 특정 페이지 접근 제한 (Vue와 다르게 Navigation guard 없음) https://www.robinwieruch.de/react-router-private-rou..

1. React.Fragment 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. class Columns extends React.Component { render() { return ( Hello World ); } } 1) short syntax ->빈태그 적어준다. class Columns extends React.Component { render() { return ( Hello World ); } } yarn add sass classnames react-icons (sass, 조건부 스타일링 위한 classnames, 아이콘) 2. Re..

"Reducer를 통해 상태 값 업데이트 && context를 통해 가져오기" 1. Context API 리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다. 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다. 2. context 만든는 법 createContext의 파라미터에는 Context의 기본값을 설정할 수 있다. const UserDispatch = React.createContext(null); Context 를 만들면, Context 안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context 의 값을 정할 수 있다. ... Provider에 의해 감싸진 컴포넌트..

과정 1. Action (액션) 객체가 dispatch 메소드에 전달 2. dispatch를 통해 Reducer 호출 3. Reducer는 새로운 Store를 생성 (Store는 하나의 리듀서만 관리할 수 있지만 리듀서를 여러개 나눠서 하나로 합칠 수는 있다) // reducers 폴더 안에 reducers.js => 모든 리듀서를 합쳐준다. Cotext API Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 방식이 유사하다. 단순히 글로벌 상태 관리를 위한 것이라면 Context API를 활용하는 것 만으로 충분하다. https://react.vlpt.us/redux/ 6장. 리덕스 · GitBook 이번 챕터에서 알아볼 주제는 리덕스(Re..

1. JSX 2. 클래스형 컴포넌트, 함수형 컴포넌트 - props, state 3. 이벤트 핸들링 4. ref: DOM에 이름달기 5. 컴포넌트 반복 : for문 -> map() 이용 6. 클래스형 컴포넌트 - 컴포넌트 라이프사이클 메서드 7. 함수형 컴포넌트 - Hooks 8. 컴포넌트 성능 최적화 9. immer를 사용한 불변성 유지 10. 리액트 라우터로 SPA 개발하기 11. Context API 12. Redux 13.리덕스 미들웨어를 통한 비동기 작업 관리 14.코드 스플리팅