프로그래머가 되는 꿈

리액트의 Life Cycle 본문

프론트엔드 (Front-end)/React

리액트의 Life Cycle

AI박사 2026. 1. 15. 16:10

life cycle : 태어나서 활동하고 죽고...

 

Mounting 앱시작!

updating 앱 활동 중! (ex.업데이트)

unmountiong 앱 종료!

 

1. 시작했으니까 화면 보여주기 (render)

2. useEffect[] 라는 hook을 호출 - render가 끝나고 한 번 호출된다. = 화면을 그려 준 다음에 내가 원하는 작업들을 넣어준다.

-> 데이터를 보여줘야 할 때 여기(?)에 넣는다. 초기 화면을 보여주고 useEffect라는 것을 호출해서 필요한 API같은 것들을 호출해서 정보를 싹 뿌려주는 역할을 한다.

 

 

1. setState() - state값을 업데이트 하겠다. = 업데이트 되면 다시 rendering 해야 한다.

2. 화면을 그려준 뒤에

3. useEffect는 배열에 state를 넣어 놨을 경우에 호출된다. (useEffect [state])

-> 어떤 state가 업데이트가 됐는지 확인하고 싶을때, 또는 어떤게 업데이트되고 이후에 또다시 업데이트를 해야 하는 것이 있다.(연속적으로 체인)

state가 업데이트 되면 바로 실행된 함수들을 넣어줄 수 있다.

 

3. 채팅 앱(비싼 것)

(같이 종료해줘야 하는 것이 있으면) useEffect의 return 사용! - 같이 종료가 된다!

 

'프론트엔드 (Front-end) > React' 카테고리의 다른 글

5-1  (0) 2026.01.16
count증가/handleClick함수/useEffect/strict (3-2)  (0) 2026.01.16
rafce 단축키  (0) 2026.01.15
버튼 만들기 (2)  (0) 2026.01.15
리액트가 리액트인 이유  (0) 2026.01.15