React 35

[React] useEffect

useEffect useEffect는 컴포넌트가 랜더링 될 때 마다 원하는 동작을 수행하는 명령이다. useEffect( 함수, 배열 ); 함수 : 원하는 동작 배열 : 검사하고자 하는 특정 값, 배열 배열의 내용 빈 배열일 경우 - 마운트 될 때만 앞의 함수를 수행한다. 1 2 3 import React, { useEffect } from 'react'; useEffect(() => { console.log("mount!")}, []); cs 마운트 될 때 마다 console에 "mount!"라고 알려준다. 배열의 값을 집어넣는 경우 보통 props나 state의 변화를 감지하기 위해 배열안에 집어넣는다. (state를 배열에 넣으면 state값이 변경되어 다시 렌더링 할 때마다 앞의 함수가 실행된다...

React 2022.01.07

[React] useState 통해 변화된 값이 바로 반영되지 않을 때

state와 useState에 대해서는 이전 글에서 이미 다룬 적이 있다. https://joylee-developer.tistory.com/144 React Native - State React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. State https://joylee-developer.tis.. joylee-developer.tistory.com 그런데 분명히 지정한 함수를 통해 state를 변경시켰음에도 변화가 바로 반영되지 않는 경우가 있다. 1 2 3 4 5 6 7 8 import React, { useState } from 'react'; const ..

React 2022.01.07

모바일 페이지에서 클릭 후 hover가 유지되는 경우

데스크탑 페이지에서는 아무런 문제가 없었는데 모바일 페이지에서는 키워드를 추가/제거하는 과정에서 이상한 점이 발견됐다. hover는 마우스가 개채 위에 올라갔을 때 적용되는 클래스이다. 데스크톱 사이트에서는 마우스 포인터를 따라 hover를 판단할 수있다. 모바일에서는 터치가 포인터 역할을 한다. 그런데 터치는 마우스가 클릭한 것 처럼 터치 이벤트는 전달되는데, 다른 터치 이벤트가 발생하지 않으면 그 위치에 있는 것으로 간주한다. 그래서 터치 후에 잘못된 hover 요소가 생기는 것이다. 모바일에서 잘못된 hover를 제거하기 위해서 미디어쿼리를 사용했다. 1 2 3 4 5 6 7 8 9 10 @media (min-width: 860px) { .keywordDeleteBtn:hover { backgrou..

React 2021.11.29

React github pages로 배포하기

github repository에 자료가 연동되어 있을 때 배포하는 방법이다! 1. gh-pages 패키지 다운로드 npm install gh-pages --save-dev 현재 위치가 react project 파일들이 있는 폴더인지 확인한 후 설치한다. 2. package.json 파일에 정보 입력 homepage property 추가 "homepage": "https://{github id}.github.io/{repository 이름}" script property에 predeploy, deploy 추가 "scripts": { ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } 모두 추가하고 나면 package.json파일이 이렇게 ..

React 2021.11.29

다이어리 검색기 만들기(6) - JSON 데이터 만들기

목차 다이어리에 대한 정보들을 JSON 데이터로 저장하려고 하니 생각보다 번거로웠다. 아예 python으로 스크래핑 할까 하다가... 어차피 tag정보는 상세정보 안의 jpg파일에 설명되어 있기 때문에 사람이 보고 확인하는 수 밖에 없었다. 그래서 조금이라도 쉽게 저장하기 위해 원하는 형식으로 정보를 만들어주는 양식을 만들었다. 위의 form을 작성한 후 Convert Info to Data 버튼을 누르면 아래에 JSON양식의 데이터가 나온다. COPY버튼을 눌러 쉽게 복사할 수 있다. HTML 구조 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 4..

React 2021.10.27

React - State 업데이트, 불변성

우연히 state와 불변성에 대해 생각해보게 됐다. 분명히 같은 기능인데 handleDelBtn을 통해서는 변화가 바로 적용되고, handleAddBtn으로 전달한 키워드는 바로 업데이트 되지 않았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 // DeleteBtn function handleDelBtn(e) { let id = e.target.id; keywords = keywords.filter(keyword => keyword !== id); props.onClick(keywords); } // AddBtn function handleAddBtn(e){ let id = e.target.id; keywords.push(id); props.onClick(keywords); } Colored..

React 2021.10.15

React - State 끌어올리기

State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여러 컴포넌트에서 사용하고, 변경됐을 때 바로 반영되어야 한다면 공통된 상위 컴포넌트에서 state를 처리하고, 하위 컴포넌트에서는 상위로 전달하는 방법을 사용해야 한다. React에서는 이 방법을 state 끌어올리기라고 한다. 내가 React로 만든 component들은 아래와 같았다. 선택된 키워드를 모든 컴포넌트에서 공유해야 했다. 처음에는 여러 컴포넌트에 useState로 selectedKeywords를 정의해줬다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

React 2021.10.15

다이어리 검색기 만들기(5) - 재사용 위한 컴포넌트 추출

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 위 사진에서 모든 부분이 Category 컴포넌트에 속해 있었는데 아래쪽의 SelectedKeywordLists를 따로 분리했다. 아래 그림처럼 다이어리 ..

React 2021.10.11

다이어리 검색기 만들기(4) - 선택된 키워드 관리(2)

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 카테고리 관련 기능 추가 - Reset버튼을 만들어 한꺼번에 목록이 사라지도록 한다. - 선택한 키워드를 아래에 보여주고, 그 목록에서도 선택해서 삭제할 ..

React 2021.10.08

다이어리 검색기 만들기(3) - 선택된 키워드 관리

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 키워드에 대한 내용은 Category에서 관리하고, selectedKeyword라는 array를 만들어 array만 App에 전달하도록 했다. input에..

React 2021.10.07