react15 React useState set함수로 값을 변경해야 하는 이유 useState를 사용 할 경우, 아래와 같은 코드에서const [test, setTest] = React.useState([]); test.map, test.filter 등을 사용해도 test의 값이 변경되는 것을 알 수 있다.(나는 처음에 set함수를 사용해야만 변경 되는 줄 알았다)하지만 test를 그냥 사용해도 값이 변경되고, setTest를 사용해도 값이 변경된다. 1. set함수를 사용해서 값을 변경하는 것과 그냥 변경하는 것의 차이- set함수를 사용해서 값을 변경하는 경우 react의 상태관리가 되므로, 렌더링이 실행된다.- 그냥 값을 변경하는 경우 렌더링이 일어나지 않는다.- 당연히 set함수를 사용해서 값을 변경하는 것을 권장. 2. set함수 사용해서 object값 변경하기- 그러면.. 2024. 7. 4. Can't resolve styled-components 오류 해결방법 npm install --save styled-components 로 설치하면 해결 할 수 있다. * --save 옵션 : package.json의 dependency 항목에 모듈을 추가한다. ** npm 5 이상부터는 --save를 붙이지 않아도 된다고 한다. 그러면 왜 오류가 나는거지.. 2023. 7. 10. redux devtools 적용하기 * Redux Devtools - redux를 사용하게 될 경우, chrome의 확장도구에서 Redux의 상태관리를 모니터링 할 수 있다. 1. Chrome 웹 스토어 : Redux devtools 설치 ( https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko ) 2. 적용 방법 2.1 설치 npm install redux-devtools-extension 2.2 적용 - React 프로젝트의 구성마다 다른데, configureStore()가 있는 파일에서 아래와 같이 수정하면 된다. import { composeWithDevTools } from 'redux-devtools-extens.. 2023. 3. 7. Cannot read properties of undefined (reading 'params') 책, 리액트를 다루는 기술 예제 실습시 나오는 오류 error msg : Cannot read properties of undefined (reading 'params') 1. 발생 const Profile = ({match}) => { const {username} = match.params; - Profile.js에서 위와 같이 match.params사용, - App.js 에서 rpofile/:username으로 설정하여, match.params.username값을 통해 현재 username을 조회해야 한다. -> username을 조회하여 창이 넘어가기는 하지만, 넘어간 화면에서는 아무 것도 뜨지 않는다. 그리고 위와 같은 에러메시지 발생. 2. 원인 - 1차적으로는, 책에서 사용된 버전과 현재 내.. 2022. 7. 3. 11. Hooks - useCallback * useCallback 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 최적화가 필요함. import React, {useState, useMemo, useCallback} from 'react'; const getAverage = numbers => { console.log('평균 값 계산 중 ..'); if ( numbers.length === 0 ) return 0; const sum = numbers.reduce((a,b) => a+ b); return sum/numbers.length; }; const Average = () => { const [list, setList ] = useState([]); const [number, setNumber] = useStat.. 2022. 2. 13. 10. Hooks - useMemo - useMemo : 렌더링하는 과정에서 특정값이 바뀌엇을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용함. 렌더링 될 때마다 필요없는 함수가 호출 된다면? useMemo 사용하여 최적화가 가능함. const avg = useMemo(() => getAverage(list), [list]); const getAverage = numbers => { if (numbers.length === 0) return 0; const sum = (numbers.reduce((a, b) => (a + b); return sum / numbers.length; }; return ( 평균값 : {avg} ... ); list값이 바뀔 떄 getAverage값이 실행됨. 평균을 구하는 대상.. 2022. 2. 3. 09. Hooks - useReducer Reducer : 현재 상태, 액션 값 (업데이트 위해 필요한 정보) 전달 받아 새로운 상태 반환하는 함수, useReducer : useState보다 다양한 컴포넌트 상황 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용 const [state, dispatch] = useReducer(reducer, { value : 0}); - useReducer(리듀서함수, 해당 리듀서의 기본 값) - useReducer 사용시, state 값과 dispatch 함수를 받아옴. - state : 현재 가리키고 있는 상태 - dispatch : 액션을 발생시키는 함수, dispatch(action)과 같은 형태. 함수 안에 파라미터로 액션 값 넣어주면 리듀서 함수가 호출됨. dispatch({type : 'IN.. 2022. 2. 3. 08. Hooks - useEffect - useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks 1. 마운트될 때만 실행하고 싶을 때, - 맨 처음 렌더링될 때만 실행하고, 업데이트 될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열 , []; useEffect(()=> { console.log('마운트'); }, []; 2. 특정 값이 업데이트될 때만 실행하고 싶을 때. - 함수의 두 번째 파라미터에 특정 값을 넣음. useEffect(() => { console.log(name); }, [name]); 3. 뒷정리 - 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 작업을 수행하고 싶다면 뒷정리함수(cleanup)를 반환해 주어야 함. useEffect(() => { c.. 2022. 1. 31. 07. Hooks - useState const [test, setTest] = React.useState(''); 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 함. test는 변수, setTest는 test 값을 변경하는 함수, useState('')에서 ''는 test의 상태기본값을 의미한다. 2022. 1. 26. 05. React 이벤트 핸들링 - onChange 1. onChange 이벤트 핸들링 - SyntheticEvent : 웹 브라우저의 네이티브 이벤트 감싸는 객체, 이벤트 끝나고 나면 이벤트 초기화됨 onChange = { (e) => { console.log(e); } } - e.persist()함수 호출 : 비동기적 이벤트 객체 참조, onChange 이벤트 발생시, 앞으로 변할 인풋값 e.target.value 콘솔에 기록하기 => 바뀌는 값 기록하기 onChange={ (e) => { console.log(e.target.value); } } - 함수형 컴포넌트 이벤트 구현 const [username, setUsername] = useState(''); const onChangeUsername = e => setUsername(e.target... 2022. 1. 16. 04. React? Javascript? 배열/객체 다루기 보호되어 있는 글 입니다. 2022. 1. 12. React 03. useState useState 사용하기. 일반적으로 아래와 같이 사용된다. const [message, setMessage] = useState(' '); - message는 현재상태 값 - setMessage는 message변경하는 함수, - ' '는 초기값 2022. 1. 11. 이전 1 2 다음
