COCO World

의외로 자주 사용되는 스킬이라 이번에 두번째 만들게 되면서 포스팅하게 되었다. 여러가지 배열값들을 나열하여 일치된 classname 중에서 특정 div값을 클릭하였을 때, 해당 요소만 CSS를 변경하여 사용자에게 보여주는데 이는 classname 동적으로 활용하는 방법이다. 보통 useState를 사용하여 값을 상태관리하겠지만 본 사용자는 리덕스를 사용하고 있어 slice를 통해 상태관리하였다. 따라서, Redux와 useState 두 가지 사용방법을 적용해보겠다. 1. Redux Toolkit의 Slice를 사용해 적용하기 메인 컴포넌트의 HTML {storeObj.state.employeeList?.map((item, idx) => ( storeObj.callbacks.selecteNameState(..

🍋 React-Query : React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 작업을 도와주는 라이브러리이다. 🌱 Redux, Mobx와의 차이점 react-query는 서버상태를 다루는 라이브러리, redux와 mobx는 클라이언트 상태를 다루는 라이브러리이다. 🌱 fetch와 axios와의 차이점 fetch와 axios는 실제 API 요청을 수행하여 직접 리소스를 불러오는 역할의 라이브러리이고, react-query는 API를 통해 불러온 서버의 상태를 내부적으로 캐싱 및 동기화하는 등 잘 활용할 수 있게 도와주는 라이브러리이다. 🍋 React-Query의 장점 별도의 설정 없이 즉시 사용이 가능하다 캐싱을 효율적으로 관리해준다 같은 데이터에 대한 여러번 ..

ERROR 발생 필자는 리액트 실행 중 console.log에 아래와 같은 경고를 만났다. Invalid dom property `stroke-width`. did you mean `strokewidth` 해결방법 svg 파일을 가져올 때, ' stroke-width' 와 'fill-rule'로 가져와지는데 문법형식을 지키지 않아서 나는 오류이기 때문에 아래와 같이 고쳐줘야 한다. => 자바스크립트의 '카멜표기법'으로 바꿔줘야 한다.

위의 에러를 검색해보니 web-vitals 모듈이 설치되지 않아서 문제가 발생하였다. yarn create react-app으로 프로젝트를 항상 생성해왔는데 왜 이번에 위의 모듈만 설치가 되지 않아 문제가 되었는지는 모르겠다.. npm가 아닌 yarn을 사용하고 있어서 아래와 같은 명령어로 해결완료! yarn add -D web-vitals

1. Redux 설치 리액트에서 리덕스를 사용하기 위하여 패키지 설치를 해줘야 한다. // 한번에 설치하기 yarn add redux react-redux // 아래처럼 따로 설치하기 yarn redux yarn react-redux 2. 폴더 구조 생성 [1] src 폴더 안에 redux 폴더를 생성 [2] redux 폴더 안에 config, modules 폴더를 생성 [3] config 폴더 안에 configStore.js 파일을 생성 각각 폴더와 파일의 역할 redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 state 관리소'인 Store를 만드는 설정 코드들이 있는 파일 modules : 우리가 만들..

1. React Hooks 리액트 hook은 React 16.8버전에 새로 추가된 기능으로, 함수형 컴포넌트에서 react state와 생명주기 기능(lifecycle features)을 '연동(hook into)'할 수 있게 해준다. hook은 Class안에서 동작하지 않는데, useState를 예시를 들면 class를 사용하지 않고도 상태를 가질 수 있게 된 것이다. 이전에 리액트가 겪던 문제들을 해결해주며, 클래스형 컴포넌트를 사용하지 않고도 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능해 졌다 리액트는 useState, useEffect 같은 내장 Hook을 몇 가지 제공한다 또한 props, state, context, refs 그리고 lifecycle과 같은 리액트 개념에 좀 더 ..

1. CSS-in-Js : 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 자바스크립트를 이용해 CSS 코드를 만들어내는 것이다. 이전 주차에서는 css파일을 생성 후, 컴포넌트에서 사용할 모든 CSS을 만들어놓은 CSS파일 안에 선언하여 담아놓고, 컴포넌트에서 className 호출을 통해 CSS파일에서 가져다가 CSS코드를 사용하였다. 이번엔 styled-component를 통해 더 간편히 컴포넌트를 꾸밀 수 있는 CSS-in-Js 방식을 사용해보자. 2. styled-components : styled-components는 우리가 리액트에서 CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다. emotion, tailwind..

1. 컴포넌트(Component) 리액트로 만든 앱을 이루는 최소한의 단위이다. 기존의 웹 프레임워크는 MVC방식으로 분리해 관리하여 각 요소의 의존성이 높아 재활용이 어려웠다 반면 컴포넌트는 MVC의 View를 독립적으로 구성하여 재활용이 가능하다 UI를 재사용 가능한 개별 조각으로 나누어, 개별적으로 작성하고, 재사용한다. 2. 컴포넌트 종류 함수형 컴포넌트 클래스형 컴포넌트 - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다