모든 컴포넌트는 여러 종류의 ‘생명주기 메소드’를 가지며, 이 메서드를 오버라이팅하여 특정 시점에 코드가 실행되도록 설정 할 수 있다.
componentDidMount(){} : 마운트[실행] 하면 동작함
componentDidUpdate(){} : 새로운 props나 setState(), forceUpdate()가 실행할때마다 동작
componentWillUnmount(){} : 엄격모드(React.StrictMode)를 사용 시에 동작-마운트와 마운트 중간에서 나옴
이를 이용해서 1초마다 자동으로 값이 바꾸어야 하는 시계도 작성이 가능해진다.
- constructor안의 this.state에 date:new Date()작성-초기에 받아올 값
- printClock=(time)=>{}형식으로 메서드 작성. 시분초를 따로 받아서 return으로 n시m분k초를 만들어야함
- componentDidMount의 중괄호 안에 setInterval(,1000)까지 작성. 앞의 함수를 따로 만들어야함
- 2번처럼 tick=()=>{this.setState({date:new Date()}) 작성. date에 새로운 Date 값을 받아옴
- 3번에서 비어있던 , 앞부분에 4번에서 쓴 메서드 이름과 this를 합쳐 this.tick을 넣는다.
- 출력을 확인하고 싶다면 console.log나 render의 return 부분에 this.printClock(this.state.date)를 적는다.
확인해야 할 부분은 3번의 setInterval(A,B)는 B의 단위가 ms 단위이고 A의 부분을 반복한다는 것이고, 4번의 경우 tick 메서드가 실행되면 date값이 new Date() 즉, 새로운 시간 값을 받아온다는 점이며, 6번의 () 안에는 2번에서 매개변수를 지정했기 때문에 들어가야 한다는 점이다.
props : 상위 컴포넌트에서 자식으로 공용으로 쓰는 바뀌지 않는 데이터
ex) products 전달해서 사용
state : 내부에서 수정되는 값 – checked
state사용할 컴포넌트는 state 사용하는 모든 상위컴포넌트의 상위 컴포넌트
ex)isOnlyStock 값을 searchbar가 아닌 상위 table에서 사용
사용할 수 있는 데이터 : props,state,바뀌지 않는 값
1.map(),filter() 복습
2. 라이프사이클 메소드
3. React 사고하는 방식>UI 화면에서 컴포넌트 작성
출력된 화면을 보고 어떤 메소드를 썼는지 생각->코드로 복습
constructor가 있다면 props나 state가 있다는 의미이므로 해당 컴포넌트의 상위 컴포넌트를 찾아본다. 해당 컴포넌트는 짧을수도 있지만, 상위 컴포넌트에 출력값에 대한 조건이 적혀 있기 때문에 그것을 찾아야 해당 결과값이 나오는 것을 확인 할 수 있다.