import React, { memo } from "react"; const Try = memo(({ tryInfo }) => { return ( <li> <div>{tryInfo.try}</div> <div>{tryInfo.result}</div> </li> ) }); export default Try;   import React, { PureComponent } from "react"; class Try extends PureComponent { render() { const { tryInfo } = this.props; return ( <li> <div>{tryInfo.try}</div> <div>{tryInfo.result}</div> </li> ); } } export default Try; 항상 영상 잘 보고있습니다.! 답변주시면 감사하겠습니다

0:38 초가량 부근에서 서버사이드렌더링은  defaultandserver?에서 html을 데이터와 합쳐서 그려준다고 그랬죠? 라고 하신 부분이 이해가 잘되지 않아서요 styledcomponent는 style을 컴포넌트로 꾸며주는 라이브러리고 렌더링할떄 작동하므로 서버에서 렌더링 하고 내려오는 SSR의 동작원리상 서버쪽에서 적용이 안됐다고 보면 되는거 같은데요 (맞나요?) 렌더링이라는거 자체가 브라우저에서 렌더링 엔진이 코드를 읽고 DOM, CSSOM하고 렌더트리로 합친다음에 리플로우 리페인트하는 과정이라고 알고 있습니다. 그럼 무조건 호스트쪽 컴퓨터의 브라우저에서 렌더링하는게 아닌가 싶은데 서버쪽에서 '렌더링'을 미리 해준다는 것이 무슨 말인지 이해가 잘되지 않습니다. 말씀하시는 '렌더링'은 화면을 구성할 코드를 만들어줬다는 말인가요? 

import React, { useState, useCallback } from "react"; //custom Hook으로 만들기 export default function (initialValue = null) {   console.log("몇번 렌더링?");   const [Value, setValue] = useState(initialValue);   const handler = useCallback((e) => {     setValue(e.target.value);  }, []);   return [Value, handler]; } 제가 바르게 이해하고 있다면, useCallback은 필요없지 않은가요? useCallback는 함수를 재정의 하지 않고 , 1. 콜백함수가 호출되면서 2.depth부분이 바뀌었을때의 두 조건이 충족해야 다시 재정의 한다고 알고 있습니다. 위 커스텀훅에서는 [] depth가 비어져있기에 첫 마운트 했을때만 작동하고 어떠한 움직임도 없어야 하기에 함수 내 setValue의 기능을 수행 하지 않는다는 뜻인데, console.log('몇번 렌더링');으로 찍어보니깐 다른 곳에서 useInput 을 사용할때마다 커스텀훅 페이지를 리렌더링 하기때문에 애초에 useCallback이 무의미한 것이 아닌가요? 애초에 다른 모듈에 있기에  useCallback은 의미가 없는게 아닌가 궁금합니다