리액트-5

JiWOn·2021년 11월 22일

React-Study(GDSC-PKNU 2021)

목록 보기

6/9

React 라이프 사이클

라이프사이클 : 컴포넌트의 생애주기. 컴포넌트가 실행되거나 업데이트되거나 제거될 때 특정한 이벤트들이 발생함.

componentDidMount()
- 컴포넌트가 클라이언트에서 불려와서 렌더링 되는데 렌더링되면 컴포넌트가 돔에 붙는 순간이 있는데 이 순간에 특정한 동작을 할수있게 할 수 있음.
- 렌더가 성공적으로 실행되었다면 저 코드가 실행됨.
- 그 다음 setState를하고 ReRender를 실행하게되면 저 코드는 실행되지 않음.
- 즉 처음 렌더가 성공적으로 실행되었다면 componentDidMount() 실행되는 것임.
componentDidUnmount()
컴포넌트를 제거했을 때 이벤트에 사용되는 코드
componentDidUpdate()
컴포넌트가 리렌더링 후에 되는 코드
componentWillUnmount()
부모컴포넌트가 자식 컴포넌트를 없앴을때

순서
클래스가 client.jsx에서 렌더링 되는 순간에 constructor 부분이랑 매소드가 클래스에 붙고 렌더링을 처음 함. 그리고 componentDidMount가 일어남.
// 클래스의 경우 -> constructor -> render -> ref -> componentDidMount
// (setState/props 바뀔 때) -> shouldComponentUpdate(true) -> render -> componentUpdate
// 부모가 나를 제거했을 때 -> componentwillUnmount -> 소멸

setInterval과 라이프사이클 연동하기

componentDidMount : 비동기 요청을 많이 함.
componentDidUnmount : 비동기 요청 정리을 많이 함.
setinterval이랑 settimeout 모두가 메모리를 계속 참
메모리 누수가 발생할 수 있음.
해결하기위해 비동기요청 마무리를 해줘야함.
비동기함수가 바깥함수를 참조하면 클로저 문제가 발생함.

클로저

closure란 함수와 함수가 선언된 렉시컬 환경의 조합, 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근 가능한 것을 말함.

Lexical 범위지정

function init() {
  var name = "jiwon"; .
  function displayName() { 
	console.log(name); 
  }
  displayName();
}
init();//콘솔에 "jiwon"
console.log(name)//에러

init()에서 지역변수 name, 내부함수 displayName() 만들었다.
displayName()은 init()함수에서만 사용할 수 있으며 내부에 자신만의 지역변수가 없지만 함수내부에서 외부함수의 변수에 접근할 수 있기 때문에 init()안에서 선언된 변수 name에 접근할 수 있다.

클로저(Closure)

function makeFunc() {
  var name = "jiwon";
  function displayName() {
	console.log(name);
  }
  return diplayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

Lexical 범위지정과 클로져는 결과는 같다.
차이는 displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 return되어 myFunc 변수에 저장된다는 것이다.

즉 makeFunc()함수가 종료되어서 name을 접근할 수 없지만 displayName() 함수에서 접근이 가능하다.

🔗참고자료1
🔗참고자료2:MDN

가위바위보 게임 만들기

⚠ 가위바위보가 바뀌지 않는 문제 발생

처음 state 설정할때 imgCoord를 0으로만 해놔서 안된거였음.

고차 함수

매서드 안에 함수를 호출하는 부분이 있으면 onClickBtn에 ()=>를 넣어주면 됨.
함수를 연달아 쓰는 코드가 많음.

Hooks와 useEffect

Hooks에선 componentDidMount같은 코드들이 없음. => 비슷하게 따라할 수 있음!

useEffect
: useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것

useEffect(()=>{ // componentDidMount, componentDidUpdate의 역할
  interval.current = setInterval(changeHand, 100);
  return () => {//componentWillUnmont역할
    clearInterval(interval.current)
  }
}, [imgCoord]);