210218_TIL

🎄오늘 한 일

---

✔️ 1.  Toy - PrimePassword()

•   소수인 현재 비밀번호와 바꾸고 싶은 비밀번호를 받아, 소수를 유지하면서 숫자 한 개씩 바꾸어 나갈 때, 새 비밀번호로 변경하는데 필요한 최소동작수를 구하는 Toy문제였다.
  
  주어진시간인 1시간안에 문제를 겨우 이해하고, 아이디어 구상과 수도코드 정도만 작성할 수 있을 정도로 난이도가 상당히 높은 문제였다. 레퍼런스의 도움을 받지 않고 풀어보고 싶어서, 여러방면으로 도전해봤으나 모든 테스트를 통과하는 로직은 구현할 수 없었다.. 레퍼런스를 확인 했을 때, 너무하다 싶을 정도로 어려운 문제였다. queue를 구현하고, 그 안에서 4번의 반복문을 돌아야하는... ㅎㅎ; 
  아이디어를 생각하고, 계속하여 디버깅을 시도하였다는 것에 의의를 둘 수 있던 문제였다.

✔️ 2. React Hooks 학습

• React에서 클래스 컴포넌트를 사용하지 않고, 함수 컴포넌트에서 상태(state)를 사용할 수 있도록 만들어주는 React의 새로운 컨셉이자 사용방법인 Hooks에 대하여 학습하였다. 
  Hooks가 해결할 수 있는 기존 클래스 컴포넌트에서의 불편한 점들이 굉장히 매력적으로 느껴졌고, 실제로 현재 트렌디한 많은 기업들이 사용하고 있다고 들어 흥미로웠다.

    
✔️ 3. HA를 위한 Server 복습

• 내일은 React와 Server 의 현재 이해도를 확인하고, 점검할 수 있는 테스트가 있는 날이다.
  아무래도 React는 바로 최근까지 다루었기 때문에 기억이 조금씩 흐릿해진 Server 부분을 다시 복습해보았다.
  
  
• mini-node-server를 다시 복습하며, 순수 node.js코드로 server를 구성하고 실행하는 법을 익혔고, chatterbox-server 부분을 복습하면서 express 라이브러리를 활용하여 조금 더 편하게 server를 만들고, 라우팅까지 깔끔하게 구현하는 법을 명확히 이해하였다.

 

🎄기억할 것

---

✔️1. Hook 개요

• Hook이란?

  : 클래스를 사용하지 않고, 함수 컴포넌트 안에서 상태(state)를 사용하고 관리할 수 있게하는 문법

• Hook이 탄생하게 된 배경, 동기

  : 상태와 관련된 로직의 쉬운 재사용을 위해서 ( 독립적인 재사용과 테스트가 가능하다)

  : 생명주기(lifecycle)기반이 아닌 함수 단위의 로직을 기반으로 작성하기 위해 (간단한 컴포넌트화) - 한가지 기능을 한 곳에서 전부 표현할 수 있도록

  : Class 문법의 불안정성 (this, 이벤트핸들러문제, 다른언어와의 혼동되는 class개념)
  
  

  "functional 함수를 이용하여 더 stateful한 코드 작성 하기 위해"

✔️ 2. State Hook 사용하기

         const [count , setCount ] = useState(0)

• useState를 호출하는 것 : count 라는 state를 관리하겠다는 것

  : "state 변수"를 선언하는 역할

  : 일반적인 변수는 함수가 끝날 때 사라지지만, "state 변수" 는 React에 의하 사라지지않는다.
  : React는 해당 state 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다.

• useState의 인자 : useState(0) 에서 '0'
  : state의 초기 값을 의미한다.
  : class에서와 달리 객체일 필요가 없고, 숫자,문자 타입 가능

• useState의 반환값 : [count, setCount]
  : 'state변수'와, '해당 변수를 갱신할 수 있는 함수' 를 쌍으로 반환한다.

• useState에서의 state 가져오기
  : "state 변수" 를 직접 사용한다.

• useState에서 state 갱신하기
  : 두번째 인자( set— )를 통해 바로 state변경

✔️3. Effect Hook 사용하기

     : useEffect 는 컴포넌트가 렌더링 된 이후에 수행해야 하는 일들이다.

• useEffect가 하는 일

  : 우리가 넘긴 함수('effect')를 기억했다가, DOM업데이트를 수행한 직후 불러낸다.

• useEffect를 컴포넌트 안에서 불러내는 이유?
  : 내부의 'state변수' 와 prop 에 접근할 수 있기 때문에

• useEffect의 수행
  : 기본적으로 첫번째 렌더링을 포함한 모든 업데이트에서 수행된다.
  : (참고) 마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각하는 것이 더 쉬울 것입니다. 리액트는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장합니다.

• useEffect에서의 clean-up실행
  : clean-up은 unmount된 컴포넌트의 데이터를 정리하는 것으로 class에서는 ComponentWillUnmout()로 구현하였다.

  • Hook에서의 clean-up

    : Hook에서의 clean-up은 useEffect안에서 return 문으로 정리할 할 수를 작성한다.

    : 컴포넌트가 unmount될 때 useEffect의 return 문이 실행된다 .
    
    

    useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; })

마무리 Think:

 내일 HA는 기대된다!  뚝딱뚝딱 성공적으로 만들어서 성취감을 획득하고 싶다 : )  : )  : )  : )  : )  : )  : )