react-tutorial
react-tutorial copied to clipboard
velopert
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook
undefined
https://react.vlpt.us/basic/16-useEffect.html
안녕하세요 벨로퍼트님, 패스트캠퍼스에서 온라인 강의를 듣고 있는데요, 온라인 강의에서 useEffect를 계속 언급하시는데, 강의 내용에 포함이 안되어있는 것 같아요 ㅠ. 이 문서에는 있지만요.
혹시 일부로 제거한 것인지, 아니면 패스트캠퍼스측에 업로드가 안된 것인지 궁금해 답글 남깁니다!
일단 무슨말인지 하나도 이해가 안가구요.... 구글링으로 찾아서 계속 이해를 하고 있는데 useRef라든가 useEffect라든가 이런 자체 개념적인 부분에서 좀더 자세하게 설명을 해주셨으면 좋겠습니다. useEffect는 Life Cycle에서 돌아갈 때 사용을 한다고 하는데 그냥 아무생각없이 듣기만 하고 있네요...
@KneeHunter
useEffect가 어려우면 한없이 어려워지는 부분이라 더 어려우실수도 있을꺼 같네요
useEffect는 첫 문장에 나와있듯이
이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대해서 알아보겠습니다
- 화면이 처음 떴을때 실행.
- deps에 [] 빈배열을 넣을 떄.
- life cycle중 componentDidmount처럼 실행
- 화면이 사라질때 실행(clean up함수).
- componentWillUnmount처럼 실행
- deps에 넣은 파라미터값이 업데이트 됬을때 실행.
- componentDidUpdate처럼 실행.
이렇게 이해하시면 되구요. 혹시 이해가 안되신다면 클래스형 컴포넌트와 리액트 라이프사이클을 보고오시면 다시 설명을 보시면 이해가 되실꺼 같습니다.
그리고 저는 개인적으로 어느정도 이해가 됬을때 https://rinae.dev/posts/a-complete-guide-to-useeffect-ko 이 글을 읽고 더 이해가 잘 됬습니다. useEffect는 동기화라는 말이 참 와닿더라구요
ps. 혹시 제 글에 잘못된 점이 있거나 하면 알려주세요!
혹시 useEffect밖에서는 users가 찍히나요?? 그렇지 않다면 부모로부터 props로 users를 받지 못한것입니다.
2020년 12월 27일 (일) 오후 3:46, hyunjong-96 [email protected]님이 작성:
안녕하세요. 훅 개념에 처음접해봐서 그런데요! function UserList({users,onRemove,onToggle}) { useEffect(()=>{ console.log('User부모컴포넌트') console.log(users) return()=>{ console.log('users여긴 뭘까') console.log(users) } },[users]) return(
{users.map((user,index)=>(
))}
) } 이런 식으로 User함수형컴포넌트의 부모컴포넌트인 UserList컴포넌트에 useEffect를 사용해봤는데 users가 출력이 되지않는데 어디가 잘못된건가요?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/velopert/react-tutorial/issues/17#issuecomment-751433165, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJZ3EBBCIUC665ZUTJEXOMDSW3J3ZANCNFSM4JCSWPCQ .
useEffect
용어
- 마운트 : 처음 나타남
- 언마운트 : 사라짐
useEffect 구조
- 함수이다
- 첫번째 인자는 함수, 두번째 인자는 배열(주로 deps 라고 칭한다.)이 들어간다.
cleanup 함수
- useEffect 안에서 return 할 때 실행된다.
- useEffcet의 뒷정리를 한다. -> state에서 값 지울때 실행됨
deps
- deps 에 특정값을 넣게 되면, 컴퍼넌트가 마운트 될 때, 지정한 값이 업데이트 될 때 useEffect 실행된다.
- deps에 값이 없다면 useEffect가 최신 값을 가리키지 않게 된다.
- deps에 값이 없다면 컴포넌트가 리렌더링 될 때마다 호출이 된다.
- deps에 값을 넣는것을 기본이라고 생각하는게 좋다.
댓글들을 보니,,, 이렇게 쉽게 설명을 하는데도 자꾸 안된다 .. 모르겠다고 하면, 뭐 어쩌란건지 보는 내가 답답하구만. 이해가 안가면 그부분을 스스로 공부를 해야죠. 평생 다른 언어하던 내가 잠깐 시간내서 봐도 이해가 잘만 되는데 정말 너무들 하는거 아니냐.
useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정
useEffect(() => {//마운트
return () => {//언마운트
//useEffect 반환되는 함수는 cleanup 함수 (뒷정리) //deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출 }; }, []);
- deps에 빈배열: 처음에만 함수 호출
- deps에 의존값 존재 : 처음과 지정값이 변경될 때 호출
- deps가 아예 없는 경우 : 컴포넌트가 리렌더링 될 때마다 호출
*부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 -> 최적화필요
- deps에 빈 배열
- 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출 (componentDidmount)
- 컴포넌트 언마운트 될 때 cleanup 함수 호출 (componentWillUnmount)
- deps에 의존 값 존재
- 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출 (componentDidmount)
- 의존 값이 업데이트 됐을 때 (componentDidUpdate)
- 컴포넌트 언마운트 될 때 cleanup 함수 호출 (componentWillUnmount)
- 아예 파라미터를 안 넣었을 경우
- 그냥 리렌더링 될 때마다 함수 호출
제가 이해한 방식인데 혹시 잘 못된 부분 있으면 지적 해주시면 감사하겠습니다.
혹시 deps에 useState로 만든 값을 넣으면 return으로 언마운트될때(업데이트될때) 불러 들이는건 가능한데 혹시 useState최신 값을 리턴 하는 방법이 잇을까요?? 현재는 useState에 함수형업데이트 해주고 있는데 다른 방법이 있을까요??
<CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate} /> <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
- 현재 CreateUser UserList 는 부모 자식간의 관계가 아님
- User의 useEffect에서 디펜던시가 없음
- CreateUser 의 input 창 상태가 변경되면 자식이 아닌 UserList 도 전부 새롭게 렌더링됨
*부모 자식이 아닌데도 렌더링이 새로 되고잇는데요 -0-;;?? 이거 왜 이러는건지 알려주세요
아.. CreateUser 의 정보가 APP에 있으니까 APP이 리렌더링 되면서 CreateUser 와 UserList 모두가 리렌더링 되는 상황인거 같네요.. 아마도
궁금한게 있는데 useEffect함수에서 console.log('컴포넌트가 화면에 나타남'); 이부분이 세번이 실행되는데 그 이유가 뭘까요? 렌더링을 한번했을 때 두번씩 실행되는건 리액트 StrictMode라 어쩔수없는거라고 알고있습니다 하지만 심지어 Strictmode를 지웠음에도 불구하고 3번씩 나오는이유는 무엇일까요?
@Liverpooll
부모컴포넌트 (App.js)로 부터 받아온 props.users 배열 안에는 요소가 3개인데요. UserList 컴포넌트에서 map으로 배열을 순회하면서 User컴포넌트를 생성해주니까 User컴포넌트는 3개인 셈이죠?
useEffect 안에 함수(첫번째 인자)는 컴포넌트가 생성될 때 호출되면서 화살표 함수 내부의 console.log()가 실행됩니다. 앞서 언급해드렸듯이 User 컴포넌트는 3개이기 때문에 각 컴포넌트 별로 console이 3번 찍히게 됩니다.
궁금합니다. 우리 예제 코드에서, users 배열에 5개의 데이터들이 들어있을 때, User 컴포넌트는 5회 로드 될 터이고, 그렇다면 useEffect 훅도 5개가 메모리에서 대기하게 되는 것인가요? 데이터 숫자가 많아진다면, useEffect 훅도 비례해서 증가할 텐데, 메모리 관리에 맞지 않는 방식 같아서요.
GPT 선생에게 물어봐서 해결했습니다.
"정확하게 말하자면, useEffect 훅 자체는 users 배열의 숫자와 무관하게 메모리에 로드됩니다. ... 하지만, 이는 실제로는 큰 문제가 되지 않습니다. useEffect 훅은 단순히 로직을 실행하고 끝나므로, 메모리의 크기와는 크게 관련이 없습니다. 또한, useEffect 훅이 호출되는 빈도가 많다고 해서 프로그램의 성능이 저하되는 것도 아니기 때문에 큰 문제가 되지 않습니다."
거짓말 하는 것일 수도 있겠지만, 지금은 거짓말을 판별할 능력이 안되니.. 이렇게 알고 넘어가야 겠습니다.
useState와의 개념이랑 헷갈리네요. 꼭 useEffect를 써야하는 이유가 따로 있을까요?
useEffect 는 useEffect 코드가 사용된 컴포넌트가 마운트되는 시점에 1회, 또는 dependency state 에 변화가 생길 때, 트리거 되고요.. useState 는 컴포넌트에서 사용되는 '상태' 를 컨트롤할 때 사용합니다.
잘 모르시는 분이 답답한 마음을 담아 질문을 하실수도 있는데.. 타박하는 글을 보니.. 쫌...
저 같이 개발경험이 좀 있는 사람도 최근 언어들의 코딩스타일에 적응을 잘 못하고 있어요.
초보분들 잘 이해가 안가더라도 좌절하시 마시기 바래요.
익숙해지는데는 시간이 걸리는 법입니다.
