코드스테이츠 세미나(React for multi platform, React Hooks) & 선택의 중요성

React가 멀티 플랫폼에 유리한 이유

명령형 vs 선언형

• 명령형
  비닐을 벗긴다 -> 뚜겅을 연다 -> 스프를 붓는다 -> 물을 붓는다 -> 기다린다 -> 먹는다

const parentContainer = document.getElementById('container');

function renderSomeBox(parent) {
  const handler = () => alert('버튼 누름!');
  
  // 정의 및 생성
  const boxDiv = document.createElement('div')
  const button = document.createElement('button')
  
  // 속성 할당
  button.innerHTML = '확인';
  
  // 이벤트 등록
  button.addEventListener('click', handler);
  
  // 엘리먼트 추가
  parent.appendChild(boxDiv);
  boxDiv.appendChild(button);
}

renderSomeBox(parentContainer);

• 선언형
  컵라면을 먹는다

ReactDom.render(<App />, document.getElementById('container');

const App = () => {
  const handler = () => alert('버튼 누름');
  
  return (
    <div>
    	<button onClick={handler}>확인</button>
	</div>
	)
}

Reconciliation

Diffing algorithm
O(N3) -> O(N)
1.서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2.key를 부여함으로써, 여러 렌더링 사이에서 변경되지 않아야 할 노드를 표시해 줄 수 있다.

Virtual Dom -> DOM Manipulation -> reflow + repaint -> state change ->
Virtual Dom(diffing) -> DOM Manipulation -> reflow + repaint

Reconciliation과 Rendering분리

react-reconciler / react-dom, react-native, react-native-windows

Hermes(Android only)

React Native의 JSC엔진 대비 초기 구동 시간 감소, 메모리 사용량 감소

Bridge

JS Thread(serialize)와 Native Thread(deserialize)의 연결
-> Re-architecture 작업 중(JSI, TurboModule)

React Native for Windows/Web

React Native for Windows : Office 제품군에 적용 중(Native와 동일한 컴포넌트)

React Native for Web : Native 컴포넌트를 Web에서 사용

React Hooks

React Hooks는 왜 탄생하였나?

Class Component의 문제점
1. Reusing state logic -> HOC, Render Props
2. Confusing Classes

위의 문제점을 해결하고 컴포넌트와 State logic의 분리를 통해서 간결하고 재사용성이 높아진다.

모든 렌더링은 고유의 state를 가진다

useEffect
Render 후에는 항상 effect가 발생

function Counter(){
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`you clicked ${count} times`);
  });
  return (
    <div>
    	<p>You clicked {count} times</p>
		<button onClick={() => setCount(count+1)}> Click me </button>
	<div>
    );
}

각 렌더링 이후에 새로운 함수가 실행 된다.
컴포넌트의 렌더링 안에있는 모든함수는 렌더가 호출될 때 정의된 props와 state 값을 잡아둔다.
=> hooks 호출은 완전히 독립된 state와 effect를 갖는다.

const Counter = () => {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setTimeout(() => {
      console.log(`You Clicked ${count} times`);
    }, 3000);
  })
  
  return (
    <div>
    	<p> You clicked {count} times</p>
		<button onClick={() => setCount(count+1)}>
      		Click me
     	</button>
	</div>
	)
}

=> 상태 관련 로직을 분리시켜 활용할 수 있다.

const Person = () =>{
  useEffect(() => {
    1.이벤트 등록
  })
  useEffect(() => {
    2.타이머 시작
  })
  useEffect(() => {
    3.새로운 사람을 만나면 인사
  })
  
  return (/ ... JSX ... /)

Effect에 의존성을 추가하자

const Person = () => {
 const [newPerson, setNewPerson] = useState('')
 
 useEffect(() => {
   console.log('hello', newPerson);
 }, [newPerson])
  
   ...
  
}

Effect의 의존성을 속이지 말자!
[] 배열을 활용해서 class 컴포넌트를 따라하는 방법 => 안티패턴

const Counter = () => {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count+1);
    }, 1000);
    
    return () => clearInterval(id);
  }, []);
  
  return <h1>{count}</h1>;
}

의존성을 없애버리는 방법

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c+1);
  }, 1000);
  
  return () => clearInterval(id);
  
}, []);

Summary

• Class component의 여러가지 단점을 Hooks를 통해 해결할 수 있다
• Hooks를 사용한다면 Class component의 패턴을 따라하면 안된다
• useEffect에 대해 이해하는 시간을 더 가져야한다

선택의 중요성

회사 선택에 관련한 조언

무슨 일을 하게 될지에 대한 고민(권한 vs 기획)
경험을 해야만 아는것과 하지 않아도 알 수 있는 것
내가 바라는 것과 회사가 어떻게 돌아가는지 무엇을 기대하는지 일치할 때 => 성장

기술적 선택

리얼 트렌드(대체 불가 ex.딥러닝) vs 페이크 트렌드(ex.블록체인)