react4 React 8 : PUT 메소드 이후 게시글 이동시 수정전 게시글이 불러와진다. (비동기 처리 주의) 현재 id번호에 맞게 한 개 게시글을 GET메소드를 통해 가져오고 있다. 현재 quiz객체 안에 replies 배열이 있는데, replies배열을 포함한 quiz객체와 replies객체를 따로 다루고 있어 개선이 필요해보인다. 수정 페이지로 넘어갈때 기존 quiz객체 넘겨주기 수정버튼을 눌렀을 때, navigate가 실행된다. 이때 state로 quiz를 넘겨준다. 넘겨받은 state를 통해 기존의 상태에서 수정할 수 있게 초기값을 세팅했다. 이제 이렇게 수정후에 수정하기 버튼을 누르면 PUT메소드가 동작하고 navigate를 통해 다시 기존 게시글로 이동하도록 되어있다. 문제점 : 수정 전 게시글이 가져와진다. 서버에는 분명히 수정이 완료되었는데, 퀴즈페이지를 이동하며 처음 가져온 퀴즈객체는 수정전이다.. 2023. 11. 2. TIL 230814 : 리액트를 접해보기 3 (useEffect) 지난 시간에 언급한 프론트 특강은 자바 스프링 과정을 배우는 입장에서 프론트를 손쉽게 구현하기 위해 ChatGPT를 활용하는 프로세스를 맛보여줬었다. jwt인증정보 확인하는 코드를 물어봤다. useEffect..? 처음보는 개념에 그냥 복붙할 수 없고 알고 써야 잠자리가 편하기 때문에 useEffect가 뭔지 정리해본다. useEffect? 일단 이 기능을 한 줄로 말하면 특정 조건시 실행해주는 조건문 같은 그런 기능? 기본 구조는 아래와 같다. //기본 구조 useEffect(실행 함수(), [변경시 실행될 변수]) //예시 const [info, setInfo] = setState('초기값') useEffect(()=>{ console.log('useEffect에 지정된 함수가 실행됐습니다.') },.. 2023. 8. 17. TIL 230811 : react 접해보기 2 (useState, hooks) 지난 시간 리액트 기본 환경세팅과 컴포넌트의 동작 구조에 이어서 리액트의 가장 기본이 되는 훅 중 두가지인 useState와 useEffect에 대해 정리해보려 한다. React hooks 리액트 훅은 16.8버전에 도입된 라이브러리로서, 기존의 클래스를 이용했던 개념을 대체해 함수형 컴포넌트에서도 이를 편리하게 사용할 수 있게 해주는 개념이다. 이에 리액트에서는 기본적으로 제공하는 hook들이 몇가지 있는데 아래와 같다. 기본 지원 hook 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext .. 2023. 8. 17. TIL 230810 : react 접해보기 1 (JSX) 특강으로 제공된 프론트엔드 내용에 react가 들어간다. 예전부터 보기는 많이 봐왔는데, 등장한 김에 react도 한번 공부해볼까 한다. vue.js 랑 고민이 좀 되긴했는데 아직은 react관련 자료도 많은것 같고 web-app 기반이라 큰 틀에서는 얼추 비슷한 내용도 있어서 react로 이어나가고자 한다. 사전 세팅 node.js 설치 (LTS추천) -> npm, npx 사용할 수 있다. create React App 라이브러리를 사용해서 기본 프로젝트를 만들어준다. npx create-react-app my-react-app react-router-dom 의존성 추가 npm install react-router-dom react 동작 기본 구조 index.html -> index.js -> app... 2023. 8. 10. 이전 1 다음
