솔적솔적

지금까지 개발하면서 느끼셨겠지만 리액트는 Single Page Application임으로 개발 시 단점이 많이 보이게되는데 그 단점은 state간의 공유가 참으로 어렵다는 사실, state를 갖다 쓸 수 있는 방법은 부모 컴포넌트 👉 자식 컴포넌트로 전달하기 위해서 props 전송을 해야한다는 것. 그래, props가 있다, props를 사용하면되겠지. 근데! data라는 state를 DetailContent컴포넌트에서 사용하려할 때 중간의 Detail 컴포넌트를 건너 뛰어서 사용할 수 없다는 불편함이 있다. 예를들어 컴포넌트가 20번 중첩이 된다면 props를 10번 이상 입력해야하는데, 이것에 대해 방지할 수 있는 방법2가지가 있다. 첫 번째 방법은 리액트 기본 문법인 Context API 를 사용하..

오늘은 리액트에서 Ajax의 요청방법은 어떻게 하나? 에대해서 알아보고자합니다만, 그전에 Ajax에 대한 개념과 Ajax를 사용하려할 때 알아야 할 요청방법들에 대해서도 살펴보도록 하겠습니다. 자, 그럼 먼저 오늘 목표로 하려하는 Ajax, 요녀석은 뭘까요? | Ajax 란? Ajax란 Asynchronous JavaScript and XML의 약자로 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 것입니다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 예를들어, 홈페이지에 3영역으로 나눠져있습니다. 내가 검색하고 싶은 것을 검색할 수 있는 검색 영역, 검색해서 나오는 목록 수(조회영역) 검색해서 나온 목..

| Lifecycle이란 예를들어서 detail페이지있잖아요, 화면에 detail페이지가 보이는 순간 이 때를 페이지에 장착이 된다. 또는 마운트(mount)된다라고도하고, 컴포넌트 안에서 state 조작을하면 update되는 과정도 있고, 컴포넌트가 쓸모가 없어지는 경우, 이 경우 컴포넌트 제거되는데 이게 unmount 라고한다. 이런 살아나서 죽는 생물같이 리액트에도 삶의 주기가 있다는 것. mount update unmount 이 라이프사이클을 알고 있다면, 중간중간 내가 코드에 간섭을 하여, 특정코드를 실행할 수 있다. update될 때 특정 코드 실행할 수 있고, unmount될 때 중간에 코드를 넣어 실행할 수 있다는 것이다. 그리고 function들 안에서 기본적으로 쓸 수 있는 함수, us..

리액트 라우터를 사용하여 페이지이동을 하려한다. 🕵️ 목표1. 리액트 라우터 설치 그리고 셋팅방법 🕵️ 목표2. 페이지를 이동 작성방법, 버튼 만들기 🕵️ 목표3. 라우터 6버전에서는 navigate 함수를 사용하자. 의 방법 정리 🕵️ 목표4. nested routes 사용하기 | 라우터 사용1. 라우터 라이브러리 설치 npm install react-router-dom@6 | 라우터 사용2. index.js 파일에 BrowserRouter로 감싸기 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); | 라우터로 페이지..