리액트

탄생 - 변화 - 죽음으로 나뉜다 탄생 : 화면에 나타나는 것 Mount / ComponentDidMount 변화 : 업데이트 (리렌더) Update / ComponentDidUpdate 죽음 : 화면에서 사라짐 UnMount / ComponentWillUnmou

주소를 감지하고 여려 환경에서 여러 라우터가 동작하도록 한다. 오늘 주로 다룰 것은 BrowserRouter이다.\-> 리액트 라우터를 사용하기 전에 터미널에서 router dom을 설치해야 한다.먼저 BrowserRouters를 임포트하고 App안의 리턴값을 Bro

리액트 훅의 useState는 사용자의 입력을 실시간으로 감지하고 렌더링 한다.입력값이 바뀔 때마다 상태 변화 함수인 setAuthor로 author state에 입력값을 저장해주면 된다. -> author라는 state 값을 작성자가 입력받을 input 태그에 val

수정하기 상태를 나타내는 setState함수를 생성한다.초기값을 false(불리언 값)으로 설정하여 만약 isEdit state값이 True인 경우 수정 중으로 간주한다. false라면 수정 중이 아니므로 그냥 렌더링하게 된다. toggle isEdit 함수는 호출되는

API를 호출하려면 제일 먼저 주소가 필요하다. 임시 API 주소를 jsonplaceholder라는 웹에서 들고 왔는데 임시 API 주소를 사용해야 할 때 좋은 것 같다.jsonplaceholder 에 들어가서 Resources 에 있는 /comments 를 사용했다.

count가 바뀌면 setCount 함수가 수행되면서 앱 컴포넌트의 자식 컴포넌트인 카운트 뷰가 리렌더링 된다. 그러면 부모인 앱 컴포넌트가 리렌더링 되면서 자동적으로 텍스트뷰 컴포넌트도 리렌더링된다. 이러한 불필요한 낭비 또는 리렌더링을 막으려면 어떻게 해야 할까?R

컴포넌트를 최적화해야 하는 이유불필요한 연산을 막아 필요한 것만 렌더링 하기 위함현재 내가 작성하고 있는 코드에서 예를 들어보겠다. DiaryEditor가 앱 컴포넌트의 하위태그로 설정되어 있는 상태다. 참고로 DiaryEditor 는 React.memo 로 감싸져 있

버튼 클릭 시 음악이 재생되게 하려면?useState 로 재생 상태 관리하기useState 값을 불리언값인 false로 설정한다. 그리고 버튼 클릭 시 실행되는 함수 playMusic 에서 audio가 일시정지(paused)상태라면 재생하고, 아니면 멈추도록 조건문을

Problemmbti 같은 체크박스 항목을 만드려고 하니 체크박스 컴포넌트를 중복으로 생성해서 할당을 하니까 재사용성이 너무 떨어지는 문제점이 있었다.위 인풋태그를 체크박스 스타일 컴포넌트인 CheckBoxCnt로 여러 항목을 만들었다.위 그림처럼 스타일 컴포넌트 안에

리액트가 만들어진 이유 리액트는 어떤 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 방식이 아니라, 다 없애버리고 처음부터 모든걸 새로 만들어서 보여준다는 생각에서 시작되었다. 업데이트 ? 동적인 UI를 위해서는 모든걸 없애버

Chakra UI를 설치한 후 애플리케이션의 루트에서 ChakraProvider를 구성해야 한다. 실제 코드에서는 Progress 바가 필요한 컴포넌트에만 임포트하여 사용했다.이렇게 설정해주면 끝!

useLocation : 현재 페이지의 위치 정보 제공pathname : 페이지 위치 정보 가진 변수useEffect(() => { ... }, pathname) : 페이지가 변경될 때마다 윈도우 위치를 최상단으로 올림라우터 구조를 담당하는 컴포넌트에서 페이지 이동하면

React 상태관리 라이브러리 state는 컴포넌트 내에서 관리.자식 컴포넌트 간 데이터 전달은 직접 못 함. 상태를 관리하는 부모 컴포넌트로 가능.자식 많아지면 상태 관리 복잡해짐. -> prop drilling상태를 컴포넌트 안에서만이 아니라 바깥에서도 관리할 수

atoms(공유상태)에서 selectors(순수함수)를 거쳐 react 컴포넌트로 내려가는 data-flow graph를 만든다. atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며, selectors는 atoms 상태 값을 동기 또는 비동기 방식으로 변환한다.상태

useEffect의 의존성 배열을 빈 배열로 설정하면 컴포넌트가 마운트될 때마다 실행된다. 만약 특정값이 바뀔 때마다 출력되게 하려면 빈 배열안에 특정값을 넣으면 된다.위 코드에서는 'useEffect'의 의존성 배열에 'checkValuesid'만 포함되어 있다.그래

@ramonak/react-progress-bar install npm install --save @ramonak/react-progress-bar animation 프로그레스바의 완성도를 useState 로 저장한다.

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.렌더링 된 HTML 유효하려면 Comlums 태그가 여러 td 엘리먼트만 반환해야한다.이렇게 부모 div로 자식을 감싸면 td는 직접적으로 tr의 자식이어야하는 HTML규칙으로 인해

supabase 스토리지 사용new bucket 클릭이름 설정 후 public 여부 선택bucket 에 파일 업로드\-> env파일 안에 계정의 버킷 URL, Key를 저장supabaseClient 파일 임포트audioPath에 버킷 내 음원이름을 설정버킷이름 설정하고

뷰를 추상화하는 것잘 설계한 컴포넌트 = 뷰를 적절한 단위로 잘 추상화한 것쇼핑 웹 사이트를 예로 들어보자. 전체적인 리스트를 담당하는 productList컴포넌트와 하나의 아이템을 담당하는 productItem 컴포넌트가 있다.요구사항각 아이템의 개수를 사진 안으로

기존에 music DNA라는 프로젝트를 하면서 같이 일하던 친구에게 한 요청이 왔다. "가수 이름의 배치가 안 맞아. 혹시 위치를 통일해줄 수 있어?"프로젝트 결과에 가수사진과 이름을 넣는 테이블이 있었는데 비교적 긴 이름이 모바일 화면에서 두 줄로 처리되었다. 결과적

프론트엔드 개발을 하는 사람들은 대부분 React라는 라이브러리를 사용합니다. 저 또한 프론트엔드를 개발하고 있기에 리액트를 사용하고 있습니다. 사용하는 입장에서 편하긴 편한데 정확히 뭐가 편한지 잘 모른다는 생각이 들었습니다.다른 프레임워크나 라이브러리를 써 본 적이

저는 이번에 React 공식문서를 통해 갖가지 Hook들의 동작원리를 알아보려고 해요. 개발할 때 안 쓰이는 곳이 없을 정도지만 어떤 원리로 사용해야 하는지 아직 잘 모르겠다고 생각했어요. useState State를 통해 컴포넌트는 정보를 기억해요. 개발 중 많이

React.memo는 props의 얕은 비교를 통해 자식 컴포넌트가 받을 props가 이전과 동일한 경우, 자식 컴포넌트의 리렌더링을 방지한다.부모가 렌더링되어도 자식에게 전달된 props가 참조적으로 동일할 때자식 컴포넌트 내부의 상태나 context 값이 변경되지

저는 React로 웹을 개발해오던 사람입니다. 최근 간단하게 앱을 만들 일이 있어서 알아보다가, 제가 쓰던 React와 가장 비슷한 React Native를 알게 되었습니다. 저는 이 두 개가 어떻게 다르며, 왜 나누었을까 하는 궁금증이 생겼습니다. 자바스크립트 컴포넌

지금 만들고 있는 동아리 지원 플랫폼에서 디자이너분이 주신 피그마 영상입니다. 이 페이지는 동아리 상세보기 페이지입니다. 개발하려고 하는 것은 모집정보, 동아리정보, 소개글, 활동사진이 있는 탭과 자동 스크롤입니다.탭 클릭 시 클릭된 메뉴의 아래 테두리가 검게 칠해진다

저는 현재 학교에서 동아리 지원 관리 플랫폼을 제작 중입니다. 아래는 해당 프로젝트 깃허브 링크입니다.moadong이번에 메인페이지에 들어갈 캐러셀을 제작하게 되었습니다.Typescript와 styled-component를 사용하였고 반응형과 무한 캐러셀 동작에 집중하