Itsmesunky141 [REACT] 쿠키와 세션에 값 저장하기 SessionStorage, localStorage 순수 JS로 세션에 값을 저장하기 위해서 sessionStorage 또는 localStorage와 같은 함수를 사용했었는데 react로 프로젝트를 진행할 때는 react 모듈로 session, cookie에 값을 저장할 수 있어야 한다. TO-DO 1. npm을 이용해 react-session-api(세션) / react-cookie(쿠키) 설치 2. 값이 잘 저장 되는지 확인 npm react-session-api / npm react-cookie 위와 같이, 터미널에서 해당 프로젝트 경로에서 npm 명령어를 입력한다. 쿠키를 이용하려면 react-cookie, 세션을 이용하려면 react-session-api를 입력하면 된다. 1. Session 문.. 2023. 3. 9. [REACT] Hooks(2) - useEffect useEffect React에서는 컴포넌트가 mount(화면에 나타남), unmount(화면에서 사라짐), 업데이트 될 때마다 실행되는 코드를 작성할 수가 있는데 이를 효율적으로 관리하기 위해 useEffect라는 hook을 제공한다. 예를 들어, 게시물을 보여주는 컴포넌트가 있다고 가정하였을 때 이 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져와서 화면에 보여주어야 하는데 이 때 useEffect를 사용하면 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져오는 코드를 실행할 수 있다. 또 다른 예로는, 사용자가 검색어를 입력했을 때 검색 결과를 가져오는 컴포넌트가 있다고 가정하자. 이 때, useEffect를 사용하면 검색어가 변경될 때마다 다른 검색 결과를 가져오는 코드를 실행할 수.. 2023. 3. 9. [REACT] Hooks(1) - useState 훅(Hook) 이란? 함수 컴포넌트에서 상태 관리, 렌더링 제어, 부작용 처리 등의 기능을 제공한다. 알고 있으면 도움이 될 Hook의 종류로는 useState, useEffect, useContext, useReducer 크게 4가지가 있다. 이것들을 모아 Hooks 라고 일컫는다. Hooks의 장점 ㆍ코드의 가독성 향상 : 클래스 컴포넌트에서는 상태와 생명주기 메서드가 함께 작성 되어, 코드가 복잡해지는 경우가 많은데 Hooks 를 사용하면 상태와 관련된 코드, 생명주기 메서드가 분리되어 가독성이 좋아진다. ㆍ 클래스 컴포넌트의 단점 보완 : 클래스 컴포넌트에서는 this 키워드를 사용해야 하기 때문에 this 바인딩과 관련된 문제들이 발생할 수 있는데, Hooks 를 사용하면 이러한 문제를 해결할 .. 2023. 3. 8. [REACT] Map() java에서의 map과 javascript에서의 map은 키와 값을 가진다는 점에서는 비슷하다고 말할 수 있다. 하지만 java-map은 그 자체가 인터페이스이고, javascript-map()은 그 자체가 함수이다. JS - map javascript에서의 map은 반복문과 같은 역할을 한다고 말할 수 있다. // for loop를 활용한 배열값 확인 const numbers = [ 1, 2, 3 ]; for (let i = 0; i { ret.. 2023. 3. 8. [REACT] Component를 생성하는 여러가지 방법 [REACT] Component 지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다. 바로 index.html, index.js, App.js 이다. 1. index.html 우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해 itsmesunky.tistory.com 링크를 클릭하면 Component에 대한 개념을 이해할 수 있습니다. 이번 포스트에서는 Component를 생성하는 여러 방법에 대해 기술할 예정이다. 1. 기본 function App(){ return( ) } // end of App() export default App; 2. 함수 선언과 동시에 생성 export default function App(){ return ( ); } // .. 2023. 3. 7. 이전 1 2 3 4 5 6 7 ··· 29 다음
