TIL 43일차

• 15:00 | 기업 협업 세션
• 16:00 | Hooks, Redux 공부

디버깅 방법

ios - command+d android - control+m

Toggle Inspector를 이용하면 리액트 네이티브 element들의 속성을 확인할 수 있다.

• 이 프로그램을 설치하면 더 깔끔하게 속성을 확인할 수 있다. React Native Debugger
• 디버깅 관련 유용한 링크 Expo Debugging Docs Chrome Dev Tools Docs

Hooks

• useEffect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

• react에게 component가 rendering 이후에 어떤 일을 수행해야 하는지를 말한다.
• Mounting과 Update라는 방식으로 생각하는 대신 redering 이후에 발생하는 것으로 생각하는 것이 더 쉽다.
• react는 effect가 수행되는 시점에 이미 DOM이 업데이트 되었음을 보장한다.

presentational component에서는 ui를 구현하는데 집중하고 필요한 값이나 함수는 props로 받아 온다.

Redux

별도 정리