useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
JavaScript/React 2022. 6. 17. 09:49
useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
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..