1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
JavaScript/React 2022. 6. 6. 17:54
1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
JavaScript/React 2022. 5. 23. 20:04
1. 함수형 컴포넌트 vs. 클래스형 컴포넌트 /* 1. Welcome 컴포넌트: class 표현 */ class WelcomeC extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function WelcomeF ( {name} ) { return Hello, {name}; } A. Props 값 전달하기 const props = { name: "Sara" } 위와 같은 props를 컴포넌트에 전달하기 위해서는... ① 함수형 컴포넌트 function WelcomeF ( {name} ) { return Hello, {name}; } /* 1. 함수 실행식 이용 */ R..