Dog foot print

useEffect 란 ? useEffect 함수는 렌더링 이후 컴포넌트와 외부의 시스템을 연결해주기 위해 만들어진 훅이다. 별도로 컨트롤이 가능하다면, “useEffect”를 사용해, 사이드 이펙트를 발생시키기도 한다. useEffect Types function useEffect(effect: EffectCallback, deps?: DependencyList): void; // type EffectCallback = () => (void | Destructor); type DependencyList = ReadonlyArray; // type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; useEffect는 첫번째 인자인 effect는 렌더..

서론 “Side Effect”를 사용하기 위해서는 useEffect 함수로 의존성 배열을 통해 발생 시킨다고 지난번 포스팅에서 언급하였다. 그러나 이전에 작성한 함수형 컴포넌트를 내부를 보면 useEffect를 내부에서 사용함에 따라, sideEffect를 발생 시키는 useEffect 함수를 재 사용 하기 어렵고, 간결함이 장점인 함수형 컴포넌트가 useEffect함수로 오염되어 버렸다. function App() { const [counter,setCounter] = useState(0); const [name,setName] = useState('hokeys'); const [show,setShow] = useState(false); useEffect(()=>{ console.log("compone..

Side Effect ‘Side Effect’ 란 무엇인가 ? 바로 함수 호출 시, 함수 내부가 아닌 외부에 영향을 미치는 것을 말한다. 다음의 코드를 보도록 하자 let a = 0; function sideEffect(){ a++; } sideEffect() sideEffect는 매개변수로 들어온 a를 변경하거나, a를 1을 증가시켜 return하지 않는다. 단순히 어떤 함수를 이용하다가 외부 스코프에 있는 변수 a를 변경하였다. 이처럼 외부 상태를 변경시키는 것을 ‘side Effect’라고 한다. ‘부수 효과’라는 어감 때문에, 무조건 안 좋은 느낌이 들 수 있지만 절대 나쁜 용도로 사용하는 것이 아니다. Use effect 클래스 형 컴포넌트에서는 부수효과를 발생 시키기 위해, ‘component..