Study/React

[React_study] useMatch()

* useMatch() 현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환합니다. useMatch()의 인자로 url을 넘기어 해당 url과 일치할 경우 url의 정보를 반환하고 일치하기 않을 경우 null을 반환한다. * useMatch() 활용 예시코드 import { useMatch } from 'react-router-dom'; const priceMatch = useMatch("/:coinId/price"); const chartMatch = useMatch("/:coinId/chart"); const Tab = styled.span` color: ${(props) => props.isActive ? "white" : "black"}; `; Chart Price useMatch를 이용해..

[React_study] styled-components를 이용한 dark/light모드

* Theme를 이용한 dark/light모드 만들기 index.js파일에 기본 셋팅을 해준다. darkTheme와 lightTheme를 만들어준다. property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다. ThemeProvider를 통해서 App을 감싸준다. 그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다. theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다. // index.js import { ThemeProvider } from "styled-components"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { tex..

[React_study] 터미널 / 브라우저 콘솔창에 warning

* 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유 개발을 하다보면 에러메세지는 터미널 혹은 브라우저 개발자도구에서 확인이 된다. 간혹 노란색의 waining 메세지가 등장하는 경우가 있다. 해당 warning는 무시하고 넘어가도 된다. (빨간 error은 해결해야한다.) 대부분 Eslint에서 잘못된 코딩관습을 교정해주고 있어서 warning를 띄워주고있다. ex) 000변수를 만들었는데 사용하지 않고 있습니다. 삭제하는게 어떤가요. 개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데 간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 빨간 error는 해결해야하지만 warning은 개무시해도 됩니다. /*eslint-disable*/ 이라는 주석을 js 파일 최상..

[React_study] reset css 하는 방법 + npm으로 설치

* reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. [결론적으로는] 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 * 기존에 사용하던 방법 ( css 파일 추가 ) https://meyerweb.com/eric/tools/css/reset/index.html 가장 많이 사용 하는 Reset css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public..

[React_study] Redux state가 object/array일 경우 변경 방법

* store에 저장된 state가 array, object 자료인 경우 Immer.js 라이브러리가 state사본을 하나 더 생성해주어서 직접 수정하는 문법도 잘 변경 된다. (Redux를 설치하면서 Immer.js라이브러리가 같이 설치되었다.) array/object자료의 경우 state변경을 state를 직접 수정해버려도 잘 된다. (참고) 그래서 state를 만들 때 문자나 숫자 하나만 필요해도 redux에서는 일부러 object아니면 array에 담는 경우가 있다. 수정이 편리하기 때문에 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ stat..

[React_study] Redux store의 state 변경

* Redux의 state를 변경하는 단계 store.js에 state변경해주는 함수를 만든다. export 해준다. 필요할 때 import해주고 dispatch()를 이용해 사용한다. * store의 state 변경하는 법 1. store.js안에 state수정해주는 함수 만들기 slice안에 reducers안에 함수를 만들면된다. (함수 작명은 마음대로 해도 된다.) 첫번째 파라미터안에 기존의 state가 담겨져 있다. (parameter name은 state로 사용한다.) return 우측에 새로운 state 입력하면 그 값으로 기존 state를 변경해준다. let user = createSlice({ name : 'user', initialState : 'kim', reducers : { chan..