리액트바오

react로 작업을 할때면 습관처럼 axios를 함께 설치하곤 했다. axios를 쓰는 나만의 이유는 없었지만 굳이 생각해보자면 fetch보다 왠지 좀 더 간단한 코드인 것 같아서? 그럼 axios는 fetch와 뭐가 다를까? 왜 굳이 설치하여 사용할까? fetch fetch는 ES6부터 들어온 JavaScript 내장 라이브러리로 따로 설치하지 않고 사용할 수 있다. Promise기반으로 만들어졌기 때문에 axios처럼 다루기가 쉽다. class Youtube { constructor(key) { this.key = key; this.getRequestOptions = { method: "GET", redirect: "follow", }; } async mostPopular() { const respo..

react 2022. 11. 22. 13:48

usestate 컴포넌트의 상태(state)를 관리 하는 함수로 상태가 변경되면 React에서 이를 감지하고 바뀐 정보에 따라 화면을 보여준다. 하나의 usestate함수는 하나의 상태값만 관리 할 수 있으며 만약 컴포넌트에서 관리해야 할 상태가 여러개라면 usestate를 여러번 호출해야한다. useEffect 컴포넌트가 랜더링 될 때마다, 특정기능이 작동하도록 하는 hook이다. useEffect(() => { console.log('마운트 될 때 실행된다.') }, []) 마운트란? Mount란 DOM객체가 생성되고 브라우저에 나타나게 되는것을 뜻한다. useEffect(() => { console.log('리렌더링 될 때 마다 실행된다.') }) 뒤에 배열을 생략하게 된다면 리렌더링 될 때마다 실..

react 2022. 10. 4. 21:15

localstorage는 자바스크립트를 통해 데이터를 저장 할 수 있는데 데이터를 브라우저에 저장하면 브라우저를 종료 후 재시작해도 데이터가 여전히 남아있다는 특징이 있다. 데이터 저장하는 방법 localStorage.setItem(‘Key’,’Value’) key값와 value값을 localStorage.setItem을 이용하여 저장해준다. 저장된 데이터 가져오기 localStorage.getItem(‘Key’) 데이터를 가져올땐 getItem을로 Key값을 입력하면 된다. 데이터 삭제하기 localStorage.removeItem(‘name’) localStorage vs sessionStorage 웹 스토리지에는 localStorage뿐 아니라 sessionStorage도 존재한다. localSto..

react 2022. 9. 22. 16:31

리액트를 사용하면서도 이 key의 역할을 잘 몰랐다. 역할을 잘 모르니 프로젝트를 할때마다 밑에 콘솔창의 에러를 자주 보곤 했다. Warning: Each child in a list should have a unique "key" prop 이상하게 이 에러는 콘솔창에는 떠도 화면에는 이상없이 잘 작동했기에 무시하곤 했는데, 대체 이 key라는 것은 어떤 역할을 하는 것인지 궁금해서 알아보기로 했다. 번역기를 돌려보니 경고: 목록의 각 자식에는 고유한 "키" 소품이 있어야 합니다. 라고 한다. 한마디로 각 요소는 key라는 고유한 prop값을 가져야 한다는 경고이다. key 값을 넣어주지 않아도 화면에 렌더링은 되지만 key가 없을때 리액트는 자식 요소의 변동을 감지하고 렌더링 할 때 비효율적으로 작동하..

react 2022. 9. 20. 23:00

React가 작동하는 원리를 알기 위해서는 먼저 DOM에 대해서 알고 있어야 하기에 먼저 DOM에 대해 알아보자. DOM이란 무엇인가? DOM은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. React는 Vitual Dom을 활용해 실제 DOM이 아닌, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. React는 적으로 데이터가 변화했을 때 직접적으로 DOM을 조..

react 2022. 8. 30. 14:57