결론 부터 말씀드리자면 아래와 같이 클릭을 할때 navigate로 navigtae('주소', { state : 보내고자하는 데이터} )를 사용하면 데이터를 전달할 수 있습니다. 받는 컴포넌트에서는 useLocation을 import하고 아래와 같이 사용하면 콘솔에서 출력이 됩니다. 해당 기능이 필요했던 이유 현재 만들고 있는 페이지에서 카테고리의 항목을 클릭하면 해당카테고리 항목의 페이지로 이동하여 그에 맞는 데이터값들을 보여줘야 했습니다. 서버에서 카테고리에 맞는 데이터를 불러오려면 아래와 같은 형식이 필요했습니다. 그래서 저는 맨뒤에 ' 보드게임 ' 이라는 값 즉, 카테고리 명이 필요했습니다. 처음에 2개의 api를 호출해야하는 줄 알았습니다. 즉, 모든 상품의 데이터 api -> post 카테고리 ..
서버에서 많은 데이터를 가져오는 작업 같은 경우는 오래걸리기 때문에 useEffect 훅을 이용해 데이터를 가져오는게 좋은 방법이라고 배웠습니다. 아직 리액트가 익숙하지 않아서 axios를 사용했을때 겪었던 문제점과 해결방법에 대해 글을 작성해보겠습니다. 먼저 문제가 발생한 상황부터보겠습니다. 첫번째 문제 상황 서버api 데이터를 이용한 요소 생성시 데이터가 할당되기전에 요소가 생성 -> 오류 아래의 이미지를 보시면 왼쪽상단에 카테고리 버튼을 클릭했을 경우 카테고리 목록이 나오는데 이때 카테고리 목록은 서버에서 받은 카테고리 데이터입니다. 그래서 axios.get을 이용해 데이터를 받아와야하는데 배운대로 useEffect안에 해당 코드를 적었습니다. 그리고 받은 데이터를 이용해 return문안에서 아래처..
리액트에 관해서 프로젝트를 하고 공부를 하면서 get을 통해 서버에서 데이터를 가져오는 작업은 무리없이 잘 실행했었습니다. 근데 이번에 백엔드(Spring)과 협업하여 프로젝트를 진행하는 과정에서 데이터를 서버에 보내야하는 과정이 필요했습니다. 그래서 이번에는 axios.post를 통해 서버에 실제로 데이터를 전달하는 방법에 대해 알아보겠습니다. POST POST : axios.post(url,data [, config]) axios에서 Request Method를 사용하기 위해서는 axios에 . 을 붙히며 소문자로 Req Method를 넣어주면 됩니다. 그리고 해당 메서드의 파라미터에는 API의 주소를 넣습니다. 그리고 POST메서드에서는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다..
오늘은 프로젝트 도중 발생한 문제점을 알려드리고 어떻게 해결했는지 알려드리겠습니다. 리액트-스프링 프로젝트를 진행하고 있는 도중에 로그인기능을 구현하고 있었습니다. 이렇게 로그인화면에서 서버에 저장되어 있는 아이디와 비밀번호를 입력하고 Login 버튼을 클릭하면 메인페이지로 이동하면서 상단의 nav바의 로그인/회원가입버튼이 로그아웃 버튼으로 바뀌게 해주는 작업이었습니다. 아래 처럼 axios.post를 이용해 사용자가 입력한 데이터를 서버에 보내주었습니다. 문제점 리렌더링 X 처음에는 생각없이 당연하다는 듯이 navigate로 메인페이지로 이동시켜주었는데 여기 부분이 문제였습니다. 로그인이 성공하면 nav바를 리렌더링시켜줘야하는데 navgiate로 이동을하면 리렌더링이 발생하지 않았습니다. 여기서 문제를..
Request & Response 클라이언트는 서버에게 요청을 보냅니다. "회원가입 시켜줘" , "게시물 생성해줘" 등등 이때 API라는 체계를 이용하여 클라이언트와 서버간에 요청과 응답을 주고 받습니다. 그 중에서도 더 체계적으로 API를 관리하기 위해 REST API가 등장했습니다. REST API는 HTTP프로토콜을 사용해 통신하며, HTTP 메서드로 요청을 표현한다는 특징이 있습니다. 요청을 보낼 때는 보낼 정확한 서버 주소를 알아야 합니다. 서버주소는 '서버주소/A'와 같이 구성되어 있습니다. 서버주소는 말 그대로 서버 컴퓨터가 위치한 곳의 주소이고, 슬래시 뒤의 A라는 곳에는 원하는 요청 기능을 적어줍니다. 예를 들면 서버주소/signin 은 로그인 기능을 수행하고 서버주소/signup은 회원..
REST API란? 서버와 통신하는 방식 중 한가지로 http 메서드를 사용하여 데이터를 요청/전송합니다. 기존에 많이 사용하던 SOAP API의 경우 서비스 인터페이스를 이용해 서버에 접근했다면, REST는 인터넷 식별자(URI)와 HTTP프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법입니다. 데이터 포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, messgae로 구성됩니다. 쉽게 말하자면, REST API는 url 주소와 메서드로 CRUD 요청을 하는 것 입니다. 클라이언트가 서버에게 요청을 보내는 유형은 크게 4가지로 나눌 수 있고, 이게 바로 CRUD 입니다. 종류 용도 GE..
자바스크립트의 sync / async 관련 상식 자바스크립트는 일반적인 코드를 작성하면 synchronous(동기)하게 처리 됩니다. 코드적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻입니다. 자바스크립트는 이상한 함수들을 사용하면 asychronous(비동기적)하게 코드실행이 가능합니다. ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어납니다. 이런 함수들은 처리시간이 오래걸립니다. ajax를 예로 들면 인터넷 상황이 안좋으면 코드실행이 오래걸릴 수 있습니다. 그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 완료되면 실행됩니다. 예를 들어보면 console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주는 코드 con..
리액트 18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었습니다. useTransition 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해줍니다.(코드실행시점만조절해주는식) batching automatic batching이라는 기능이 있는데 state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 재렌더링을 마지막에 1회만 처리해줍니다. 일종의 쓸데없는 재렌더링 방지기능이고 batching이라고 합니다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 근데 문제는 ajax요청, setTimeout안에 state변경함수가 있는 경우 batching이 일어나지 않습니다. 리..
컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다. 평소에는 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 1초나 걸리는 무거운 컴포넌트면 어쩔 것입니까. 부모컴포넌트에 있는 버튼 누를 때 마다 1초 버벅이는 불상사가 발생합니다. 그럴 땐 자식을 memo로 감싸놓으면 됩니다. function Child(){ console.log('재렌더링됨') return 자식임 } function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } 콘솔로 확인해보시면 버튼을 누를때마다 Cart컴포넌트가 재렌더링될때마다 Child도 재렌더링됩니다. 평소엔 별 문제가 없겠지만 예가 렌더링이 2초정도..
React를 이용해서 개발을 진행할때 이미지를 넣었는데 안보이는 버그같은게 생기면 개발자도구를 켜서 Elements탭 살펴보면 되는데 여기선 짠 코드가 실제 html css로 변환되어서 보여집니다. 컴포넌트로 미리보고 싶으면 리액트 개발자도구를 설치해서 보면 됩니다. React Developer Tools 크롬 웹스토어에 들어가면 설치가 가능합니다. 설치를 하면 개발자도구에서 Components 탭이 생기는데 여기서 컴포넌트를 볼 수 있습니다. 컴포넌트구조파악이 가능하고 컴포넌트를 찍어보면 해당 컴포넌트의 state, props 같은 것들 조회가능합니다. 수정해볼 수 도 있습니다. Profiler 탭에서 성능평가 가능 Profiler 탭 들어가서 녹화버튼 누르고 페이지 이동이나 버튼조작을 해보고 녹화를 ..
AJAX 요청하다보면 다음의 기능들이 가끔 필요해집니다. 몇초마다 자동으로 데이터 다시 가져오게 하려면? 요청실패시 몇초 간격으로 재시도? 다음 페이지 미리가져오기? AJAX 성공/실패시 각각 다른 HTML 보여주려면? 직접 개발해도 되겠지만 React-query라는 라이브러리 설치해서 써도 됩니다. sns, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용하고 나머지 사이트들은 딱히 쓸데는 없습니다. 설치 & 셋팅 npm install react-query 그리고 index.js파일열어서 1번 2번 3번하면됩니다. import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new Query..
새로고침하면 모든 state 데이터는 리셋됩니다. 왜냐하면 새로고침을 하면 브라우저는 html css js파일들을 처음부터 다시 읽기 때문입니다. 이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 됩니다. 서버나 DB가 없다면 localStorage를 이용해도 됩니다. 크롬개발자도구에서 Application 탭에 들어가면 볼 수 있습니다. 사이트마다 5MB정도의 문자 데이터를 저장할 수 있습니다. object 자료랑 비슷하게 key/value 형태로 저장합니다. 유저가 브라우저를 청소하지 않은이상 영구적으로 남아있습니다. localStorage 문법 js파일 아무데서나 다음 문법을 쓰면 로컬스토리지에 데이터 입출력할 수 있습니다. 차례대로 추가,읽기,삭제 문법입니다. localStor..
지금까지는 삼항연산자로만 JSX에서 if문을 작성했었는데 또 어떤 if문들을 사용할 수 있는지 알아봅시다. 1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 아래와 같이 사용합니다. 우리가 프로그래밍을 하면서 자주사용하던 if문은 return()안의 JSX 내에서는 사용불가능합니다. 그래서 보통 return + JSX 전체를 if문을 작성해서 사용합니다. function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } (참고) else와 중괄호를 하나 없애도 아까 코드와 똑같은 기능을 합니다. 이유는 자바스크립트 function 안에선 return 이라는 키워드를 만나면 return..
store(Redux)에 저장된 state가 array, object 자료인 경우 state 변경을 좀 쉽게 편리하게 할 수 있습니다. redux state가 array/object인 경우 변경하려면 아래의 state에서 kim을 park으로 변경하고 싶으면 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } } }) 당연히 저렇게 쓰면 changeName()사용시 변경됩니다. 근데 state를 직접 수정하라고해도 변경 잘 됩니다. state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는 ..
Redux의 state를 변경하고 싶으면 변경하는 법이 따로 존재합니다. 1. store.js에 state 변경해주는 함수부터 만들어주고 2. export 해두고 3. 필요할 때 import 해서 쓰면 되는데 dispatch()로 감싸서 써야합니다. Q. 컴포넌트에서 state 직접 수정하면 편하지 않나요? 당장은 편할수는 있어도 프로젝트가 커지면 심각한 단점이 발생할 수 있습니다. 컴포넌트 100개에서 직접 'kim'이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 원인을 찾기 위해 컴포넌트 100개를 다 뒤져야합니다. 하지만 아래처럼 state 수정함수를 미리 만들어놓고 컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜 놓으면 버그가 발생했을때 이유 찾기가 ..
