개발 블로그

동적 경로 (Dynamic Segments)란? 동적인 데이터를 포함하고 있는 경로 URL Parameter / 뒤에 아이템의 id를 명시~/product/1~/product/2~/product/3 아이템의 id 등의 변경되지 않는 값을 주소로 명시하기 위해 사용 됨 Query String? 뒤에 변수명과 값 명시~ /search?q=검색어 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용된다 URL Parameter 실습 Route path="/diary/:id" element={Diary />} /> path props에 /를 추가하고 :id 이런 식으로 이 다이어리 뒤에 오는 어떠한 값이 있다면이 값은 이제부터 무조건 동적 경로인 url 파라미터를 의미 하는 값이다 그러면 이제 다이어리..

. Link를 임포트하고 Link 컴포넌트를 추가한다Home/New/Diary 누르면 페이지 깜빡임 없이 페이지가 이동하는 걸 확인할 수 있다 이때에도 클라이언트 사이드 렌더링 방식으로 페이지 이동한다 링크가 필요할떄는 링크 컴포넌트를 이용그게 아니라 이러한 이벤트 핸들러 함수 안에서 특정 조건에 따라서 페이지를 이동 시켜야 된다면 useNavigate라는 커스텀 훅을 React-routert-dom 으로부터 불러오셔서 navigate 함수를 받아와 사용하면 된다

npm.js에 등록되어 있는 라이브러리대다수의 리액트 앱이 사용하고 있는 대표격 라이브러리 npm i react-router-dom 터미널에 입력하여 설치npm ls react-router-dom 설치 되었는지 확인 우선 main.jsx에 위와 같이 브라우저 라우터를 임포트 해주고 App 컴포넌트의 부모 컴포넌트로 감싼다 크롬 개발자 도구로 확인해보니 요소들의 부모요소로 감싸고 있는 것을 확인 페이지 역할을 할 컴포넌트들을 위와 같은 구조로 생성 해준다 이러고 각각의 컴포넌트를 위와 같이 임시적으루다가 return문과 export문을 만들어줌 임포트문으로 만든 컴포넌트를 App.jsx로 불러오고 BrowserRouter로 전체 앱을 감싸주면, 그 안에서 Routes 컴포넌트가 일종의 swit..

Multi Page Application (MPA)웹 사이트의 각 화면이 서버에서 별도의 HTML 페이지로 존재하고,사용자가 페이지를 이동할 때마다 서버가 새로운 HTML 파일을 다시 전달해주는 전통적인 방식- React.js는 이 방식을 따르지 않음 (쾌적한 페이지 이동 제공이 어렵기 때문) 서버 사이드 렌더링(SSR)사용자가 웹페이지를 요청하면 서버가 HTML을 직접 만들어서 브라우저에 보내주는 방식이다.브라우저는 이미 완성된 HTML을 받아 바로 화면에 표시할 수 있다. MPA 방식의 단점 : 페이지 이동이 매끄럽지 않고 비 효율적임 다수의 사용자 접속시, 서버의 부하가 심해 짐 Single Page Application (SPA)- React App이 채택한 방식페이지 이동이 매끄럽고 효율적임다수..

원래는 위와 같이 TodoContext 만 썻다면 이번에는 이렇게 Context를 두개의 Context로 분리한다 return문도 이렇게 수정해준다 근데 내가 DispatchContext에 ValueProps로 전달하고 있는 이 객체도 AppComponent에 TodoState가 변경이 되어서 리렌더링이 발생하게 되면 새롭게 다시 생성이 될 것이다 그래서 이 객체를 다시 생성하지 않도록 useMemo라는 React Hook을 쓸 것임 useMemo를 추가로 React로부터 불러와 준 다음에 리턴문 위에 const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 두번째 인수로는 빈 배열을 전..

context를 import 해준다 createContext 라는 메서드를 이용해서 새로운 컨텍스트 객체를 하나 만들었다이 컨텍스트는 보통은 컴포넌트 외부에 선언을 한다 앱 컴포넌트 안 쪽에 컨텍스트 객체를 생성하게 되면 이 앱 컴퍼넌트가 리렌더링이 될 때마다 계속해서 요 라인을 실행하기 때문에계속 새로운 컨텍스트를 생성하게 되기 때문이다. 그리고 이 앱 컴포넌트의 return문 안에서 여기서 현재 props를 전달받고 있는 두 컴포넌트를 감싸도록 해주면 된다 그리고 value props로 위와 같은 함수를 전달해준다 그럼 공급은 했으니 꺼내 쓰는 것은 어떻게 할지 아라보자 App.jsx에서 아래와 같은 것을 지워준다 컴포넌트에서 주는 props 다 지워 그리고 TodoContext를 사용할 수 있게 ..

React Context컴포넌트간의 데이터를 전달하는 또 다른 방법기존의 Props가 가지고 있던 단점을 해결할 수 있음 Props는 부모 -> 자식 으로만 데이터를 전달할 수 있엇음App -> ChildA -> ChildB이렇게 되면 App에서 ChildB로 바로 전달이 불가해서 ChildA가 중간다리 역할을 해줘야한다 그래서 저번 TodoList 실습에서는 이렇게 Props를 전달해줬는데 이 단계가 늘어나는 상황을 Props Drilling (프롭스 드릴링)이라고 한다 이것을 해결하기 위해서 나온 것이 React Context컴포넌트간의 데이터를 전달하는 또 다른 방법 기존의 Props가 가지고 있던 단점을 해결할 수 있음 - Props에 어떤 단점이 있길래? -> Props Drilling 을 해결

app.jsx의 함수들을 const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targ..