리액트를 들어가며,,생명주기,Props, 가상돔, state

프로젝트를 생성한 파일 경로와 터미널에서 yarn start 할 때 경로를 잘 보자 예를들자면 desktop과 Desktop !

jsx 에서 자바스크립트 값을 가져올땐 중괄호를 사용 

 

Props

컴포넌트끼리 정보 교환할 댸 사용, 부모에서 자식 방향으로만 흐름 

 

State

컴포넌트 내부에서 바뀔 수 있는 값, useState() 사용해서 만듬

const [value, setValue] = useState('기본값'); 

 

state를 조작, 변경할 땐 setValue로 변경하기!

 

Virtual Dom(Document Object Model)

돔은 브라우저가 화면을 그리기 위한 정보가 저장된 데이터임

하나하나의 html을 담고있는 페이지를 도큐먼트라고 하고 이걸 분석하여 페이지를 띄어주는 방식

왜 가상돔이 필요하냐면 실제 돔을 조작하는 작업은 무겁기 때문에, Dom의 요약본이라고 볼 수 있음

리액트가 state가 변경되어 리렌더링이 발생할 때, 이 시점마다 새로운 내용이 담긴 가상돔을 생성함

 

 

리액트 생명주기

Mount (생성)

• Dom이 실행되고 웹 브라우저에 처음 나타나는 것
• constructor
  • 생성자, 컴포넌트 만들어질 때 가장 먼저 실행됨, 초기 state값 정하기 가능

  // Class - 얘 클래스 형은 초기 정할 때 컨스트럭터 사용
  class Example extends React.Component {
    constructor(props) {
      super(props);
        this.state = { count: 0 };
  }
  
  // Hooks - 얘 훅은 useState 훅 사용
  const Example = () => {
    const [count,setCount] = useState(0);
  }
  

• getDerivedStateFromProps
  • 프롭스에 있는 값을 state에 넣을 때
• render
  • 준비한 ui를 렌더링 하는 메소드
  • 컴포넌트를 렌더링 할 때

  // Class
  class Example extends React.Component {
    render() {
      return <div>컴포넌트</div>
    }
  }
  
  // Hooks
  const example = () => {
    return <div>컴포넌트</div>
  }
  

• componentDidMount
  • 첫 번째 렌더링 마치고 호출되는 메서드
  • 얘가 호출되는 시점은 만든게 화면에 나타난 상태
  • 외부 라이브러리 연동하거나, 데이터요청하는 작업 등등’’

Update (업데이트)

• 프롭스가 바뀔 때, 스테이트가 바뀔 때, 부모 컴포넌트가 렌더링 될 때
• this.forceUpdate 로 강제로 렌더링을 트리거할떄 ?
• getDerivedStateFromProps
• shouldComponentUpdate
  • 프롭스,state 변경 시 리렌더링 할지 말지 결정(반드시 트루나 펄스로 반환)
  • 얘는 성능 최적화를 위한 것임
• render
• getSnapshotBeforeUpdate
  • 렌더에서 만들어진 결과가 실제 반영되기 직전에 호출 됨
  • 하나의 예시로 페이지에 새로운 내용이 추가됐을 때 사용자의 스크롤 위치를 새로운 내용이 아닌 기존 위치로 유지하기 위해 사용할 수 있다
• componentDidUpdate
  • 리렌더링 완료 후 실행됨
  • 우리가 원하는 변화 모두 반영 후 호출되는 메서드
  • preProps나 preState 사용해서 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있음

Unmount (제거)

• 컴포넌트가 화면에서 사라지는 것
• componentWillUnmount
  • 컴포넌트를 돔에서 제거할 때 실행