220725 TIL

오늘 할 일

• 새로운 주가 됐다. 주특기 주차 4일차. 일요일은 휴식을 취했기 떄문에 생각보다 덜 됐다. 오늘부터 수요일까지가 ㄹㅇ 진심모드로 빡공해야겠다. 뭐 시작한 지 얼마나 됐다고 벌써 긴장이 풀렸나.. 

---

오늘 한 것 & 더 봐야할 것

• 리액트에서 렌더링이란 무엇인가?
  리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. 
  쉽게 말해 화면을 어떻게 보여줄 것인가에 대한 것 같다. 현재로서의 이해는 이게 최선.
  
  
• 함수형 컴포넌트와 클래스형 컴포넌트의 차이
  React 컴포넌트를 만들 때 클래스형 컴포넌트, 험수형 컴포넌트 2가지의 방식이 있다.
  과거에는 클래스형 컴포넌트를 많이 사용하였지만, 2019년 V16.8 함수형 컴포넌트에 리액트 훅(hook)을 지원해 줘서 
  현재는 공식문서에서도 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. (리액트 훅(hook)알아볼 것)
  
  
• React - DOM
  뭐 일단 가장 쉬운 설명은 React에서 쓰이는 각 html 태그 <div>,<p> 등의 같은 것들을 각각 객체 취급하여 하나의 요소로 보는 그런 느낌인데... 좀 더 딥하게 봐야한다. 기본 중에 기본이라니깐 여기저기서.
  
  HTML의 DOM은 html/css와 javascript의 연결고리 같은 개념. 
  DOM은 기본적으로 문서 객체 모델로서 트리구조를 가지고 있다. 
  
  
• 가상 돔(Virtual DOM)
  DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤
  최소한의 내용만 반영 하는 기능 → 성능 향상
  
  가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고,
  DOM에 변경이 있을 경우 해당 변경을 반영함
  
  실제돔의 가벼운 사본.
  
  실제 예시로는 페이스북이나 트위터, 인스타그램같이 페이지를 내리면 내릴수록 계속 새로운 피드가 로그인 되는데 이걸 불러올 때마다 실제 돔에 연산하여 항상 새로 렌더링을 하여 보여주면 연산을 지속적으로 해주며 속도적인 면에서 성능이 안좋아지고 브라우저 자체가 뻗는 일도 있을 수 있다. 속도적인 측면에서나 오류나 버그를 적게 나오고 개선시키기 위해서 나온 기능이라고 볼 수 있다.
  즉, 가상돔과 실제돔에서 새로 추가된 부분만 비교하여 전체가 리렌더링 되는게 아니라 새로 만들어진 부분만 추가되어 쓸모없는 연산을 줄여주는 느낌이다. (진행하면서 좀 더 정확한 개념 확실하게 잡기)
  
  
  • React 기술매니저님 설명
    리액트란
    컴포넌트 기반으로 DOM을 조작할 수 있도록 도와주는 라이브러리 (프레임 워크가 아님)
    JSX를 사용
    React !== JSX
    
    리액트는 바벨이라는 컴포넌트를 활용한다.
    
    컴포넌트
    리액트에선 class/function 두가지를 이용해 컴포넌트를 렌더링 할 수 있도록 지원한다.
    
    라이프 사이클
    펑션 컴포넌트는 렌더와 업데이트만 있다고 생각하면 편하다. 클래스는 다있다(원래 알던 사이클대로 움직임)
    
    클래스 컴포넌트는 생명주기가 있고 언마운트될 떄 메모리에서도 삭제된다.
    
    펑션 컴포넌트는 그때그때 만들어서 호출하는 개념이라 메모리 사용이 적고 좀더 유용? 한 느낌
    얘네도 메모리에 저장은 가능하나 훅이나 유즈메모나 유즈콜백같은 함수를 사용해서 가능은하다. 지금 단계에서는 아직 어려운 개념이니 알아만 두자.
    
    렌더링
    index.js 에서 어떻게 흐르는지 확인이 가능하다.
    
    훅
    const [state, setState] = useState();
    usestate 인자값이 state값으로 들어가서 쓰인다. setState는 그걸 어떤값이 들어와도 사용할 수 있게 하는 그런..?
    setState안에는 콜백함수 함수를 활용할 수 있다.
    
    
    props 와 state
    외부에서 관리하는 값 프롭스 
    내부에서 관리하는 값 스테이트
    
    (전반적으로 내용이 중구난방이니까 정리하는 과정 필요)

 

 

D-85.