gggimmin 개발 블로그 gggimmin 개발 블로그

select 태그를 통해 option 을 선택할 수 있도록 만들던 도중에 warning: use the `defaultvalue` or `value` props on instead of setting `selected` on . 이라는 error 메세지를 만났다. 기존 코드 올리실 곳을 선택해주세요 팝 클래식 / 재즈 첫 번째 옵션은 select 가 접혀있을 때 가장 먼저 보여지는 안내 용도로 작성한 option 이다. disabled selected hidden 을 통해 기본적으로 옵션을 보여주지만 선택은 하지 못하게 해놨다. 하지만, 콘솔에 위의 이미지와 같이 warning: use the `defaultvalue` or `value` props on instead of setting `selecte..

리덕스는 "중앙 state 관리소" 이다. 리덕스는 전역 상태관리 라이브러리 라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. useState 로 생성한 State = Local State, Redux에서 생성한 State는 Global State 이다. 1. 리덕스 설치 yarn add redux react-redux # 위 코드는 아래의 두개를 한번에 설치한 것과 같은 의미 yarn add redux yarn add react-redux 2. 폴더 구조 1. src 폴더 안에 redux 폴더 생성 2. redux 폴더 안에 config, modules 폴더를 생성 3. config 폴더 안에 configStore.js..

1. 프로젝트 개요 1-1 : 팀 소개 팀명 : N을 품은 S 프로젝트 인원 : 4명 프로젝트 참여자 : 김지민, 서혜련, 남해리, 김명환 1-2 : 프로젝트 명칭 What's your Music 1-3 : 프로젝트의 목적 또는 기능 What's your Music 은 음악을 좋아하는 사람들의 정보 교환 및 음악 추천을 위한 커뮤니티이다. 팝, 클래식, 재즈 등 카테고리 별로 음악 정보 및 추천 음악을 유저들이 직접 올린다. 1-4 : 프로젝트 일정 2024 / 02 / 07 ~ 2024 / 02 / 15 1-5 : 프로젝트 기획 1-6 : 프로젝트 운영 방식 및 Rules 프로젝트 운영 방식 예시 commit 전 깃 허브 페이지 이슈 생성 후 이슈 번호 생성 github page - new issue ..

리렌더링의 조건은 다음과 같다. 1. 컴포넌트에서 state가 바뀌었을 때 2. 컴포넌트가 내려받은 props가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링 리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 좋지 않은 사실이다. 리렌더링이 자주 일어나는만큼 비용이 많이 발생하기 때문이다. 이러한 문제를 해결하는 것이 최적화(Optimization) 이라고 부른다. 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 - memo (React.memo) : 컴포넌트를 캐싱 - useCallback : 함수를 캐싱 - useMemo : 값을 캐싱 이렇게 3가지이다. 오늘은 memo (React.memo) 에 대해 알아보려한다. - 1번 컴포넌트가 리렌더링 된..

예제와 함께 학습을 진행하다보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해줄때 데이터가 필요없는 중간 컴포넌트를 거치고 거쳐 데이터를 전달해주는 경우도 많았다. 이 부분에 대해 불편함을 느끼던 중, 이런 문제를 해결할 유용한 React hook 이 있다는 것을 알았다. " useContext " 'useContext' 는 React 에서 제공하는 훅 중 하나로, React 컨텍스트(Context)를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용된다. 컨텍스트는 React 애플리케이션 내에서 전역적으로 데이터를 공유하고, 컴포넌트 간에 데이터를 전달하기 위한 방법을 제공한다. 'useContext' 를 사용하면 컨텍스트에 저장된 값을 읽어와서 사용할 수 있다. context ..

useRef 는 DOM 요소에 접근할 수 있도록 하는 React Hook 이다. 리액트에서도 DOM을 선택해야 할 상황이 생기는데 예를들자면, 특정 input 태그를 focusing 해야 하는 경우다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 위 코드는 useRef hook의 사용법이다. 콘솔을 확인해본다면 ref 에는 값이 저렇게 담겨있는걸 볼 수 있다. 그리고 ref 에 담겨있는 값을 변경도 가능하다. import "./App.css";..

useEffect ? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. - 어떤 컴포넌트가 화면에 보여질때 내가 무언가를 실행하고 싶다면 - 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 위와 같은 상황이 있을 때 useEffect 를 사용한다. ( useState 와 마찬가지로 import 해서 사용해야한다. ) // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; ..

useState 와 useRef 는 React 에서 상태를 관리하는 방법 중 하나다. 두 가지는 비슷해 보이지만, 사용 목적과 특징이 다르다. 1. useState React 컴포넌트에서 '상태'를 관리하기 위해 사용하는 Hook이다. 상태가 변하면 컴포넌트는 리렌더링되며, 그 결과를 사용자에게 보여준다. 이 경우, 상태가 변경될 때마다 컴포넌트가 리렌더링되어 사용자에게 최신 상태를 보여준다. 2. useRef 이 Hook은 컴포넌트의 '참조'를 관리하는 데 사용된다. useRef를 사용하면 DOM 요소에 직접 접근할 수 있다. useRef로 생성된 객체는 .current 프로퍼티를 가지고 있으며, 이는 변경 가능한 값으로 사용될 수 있다. 이 값은 변경되더라도 컴포넌트의 리렌더링을 일으키지 않는다. 따..