목록리액트 (3)

대기업을 향한 디벨롭 블로그

localStorage 브라우저에 데이터 저장하기(상세)

참고용사이트 https://ko.javascript.info/localstorage localStorage와 sessionStorage ko.javascript.info 브라우저에 데이터를 저장할 수 있는 LocalStorage를 알아보겠습니다. 브라우저에 데이터를 저장할 수 있는 객체는 2가지가있는데 하나는 sessionStorage와 우리가 배워볼 localStorage가 있다. 이 두가지를 웹 스토리지 객체라고 부른다. 먼저 localStorae의 특징을 알아보자. 데이터를 저장할때의 자료형은 '문자열'데이터만 저장할 수 있다. 데이터를 새로고침하여도 데이터가 남아있다. (브라우저를 닫았다 열어도 없어지지않음) 웹 스토리지객체는 네트워크 요청시 서버로 전송되지않는다. 최소 2MB이상의 객체를 저장할..
ReactJS 2022. 8. 1. 00:52
useEffect - React Hooks 리액트훅

useEffect는 React Hooks중에있는 렌더링에 관한 훅이다. 컴포넌트를 useEffect를 이용하여 처음렌더링될때 , 업데이트될때 , 제거되었을때의 코드를 집어넣을 수 있다. 코드로 알아보자. App.js에 useEffect함수안에 console을 찍어보았다. useEffect함수는 렌더링될때마다 항상실행이된다. 버튼을 누르면 컴포넌트가 렌더링됬다가 안됬다가 하는 코드를 작성해보았다. useState가 바뀌면서 화면이 재렌더링이 될대마다 useEffect도 같이 함수가 실행된다. 이렇게 화면이 렌더링될때 useEffect가 따라다닌다. 여기서 useEffect를 설정해 줄 수 있는데 , 맨 끝에 빈배열을 넣어주면 맨처음 한번실행되고 그다음 렌더링부터는 실행이 안된다. 뒤에 배열안에는 어떤 요소..
ReactJS 2022. 7. 25. 16:00
React Bootstrap 사용하기

일단 bootstrap이란 프레임워크이다. '디자인 도우미'라고 생각해도 무방하다. CSS를 커스텀하지않고 bootstrap을 가져다써도 완성도가 좋다. 트위터에서 만든 프레임워크이며 엄청난 사랑을 받고있다. 리액트에서 bootstrap을 사용하는 법을 알려드리겠다. 먼저 react에서 npm install을 해주어야 한다. 리액트 bootstrap공식 사이트에 들어가보자. https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 들어가서 Get Started를 누르면 시작할 수 있다. 이렇게 다운로드를 받으라고 나와있다. ..
ReactJS 2022. 7. 25. 15:14
이전 Prev 1 Next 다음