리액트 기본 질문입니다

Question

import React, { useState } 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 App = () => { const [list, setList] = useState([]) const [number, setNumber] = useState('') const onChange = e => { setNumber(e.target.value) } const onInsert=e=>{ const nextList=list.concat(parseInt(number)) setList(nextList) setNumber('') } return (

{value}

평균값: {getAverage(list)}

) } export default App 저기서 input창에 숫자를 넣게 되면 number라는 상태값이 바뀌는 것은 알겠는데왜 계속해서 console.log('평균값 계산중..') 이게 실행이 되는 것인가요?리액트에서 상태가 변경이 되면 렌더링이 다시 되고 해당 상태를 사용하고 있는 컴포넌트들이 다시 실행되는 것은 알겠으나,getAverage함수에는 number를 넣어준 것도 아닌데 왜 실행이 되는지 이해가 가질 않습니다ㅠ

쿠마스 · Answer

평균값: {getAverage(list)}이곳에서 계속 호출되서 그렇습니다

황펭귄제 · Answer

왜 계속 호출이 되는 것인지 알 수 있을까요...?

쿠마스 · Answer

setNumber함수를 통해 number값을 변경하게 되면 화면을 다시 그려주게 됩니다. number값을 변경할때마다 화면이 계속 다시 그려지니 getAverage항목이 계속 호출되는겁니다.아래와 같이 작성하시면 원하시는데로 동작할겁니다. const getAverage &#61; useMemo(() &#61;> { console.log('평균값 계산중..'); if (list.length &#61;&#61;&#61; 0) return 0; const sum &#61; list.reduce((a, b) &#61;> a &#43; b); return sum / list.length; }, [list]);

황펭귄제 · Answer

아 무슨 말씀이신지 이해 했습니다ㅠㅠㅠ 감사합니다!! 변화가 생긴 부분만 렌더링을 다시 하는 게 아니라 jsx 전체를 우선 다 리렌더링 하는 것이었군요(태그를 어떻게 하는지 모르겠네요ㅠ 감사합니다!)

리액트 기본 질문입니다

4개의 답변

Q&A 목록