Epic React (11) 썸네일형 리스트형 [Epic React] useLayoutEffect, useImperativeHandle, forwardRef useLayoutEffect When? DOM에 (직접) 관찰 가능한 변경을 가하여 브라우저가 업데이트된 dom 페인트해야 하는 경우 LayoutEffect를 사용합니다. 포커싱, 스크롤(top, bottom 이동) 그 외 전부 useEffect function MessagesDisplay({messages}) { const containerRef = React.useRef() // update, unmount시마다 호출 React.useLayoutEffect(() => { containerRef.current.scrollTop = containerRef.current.scrollHeight }) return ( {messages.map((message, index, array) => ( {message.. [Epic React] form 사용하기 Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev kent c dodds 의 Epic React 기초 강의 공부 내용 정리이다. 추가로 적고 넘어갈만한 팁이 있다면 fragment는 flexbox나 grid랑 사용하면 좋다고 한다. jsx를 바벨이 해석할 때. 함수형 컴포넌트와 일반 컴포넌트를 맨 앞글자의 대소문자 여부로 판단하기 때문에 주의해야 함. function UsernameForm({onSubmitUsername}) { const [error,setError] = React.useState(null); const [value,setValue] = React.useState(""); function handleSubmit.. [Epic React] React.createElement, jsx와 바벨 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 수업을 내돈내산하여 공부한 내용이다. props를 어떻게 사용해야 가장 성능에 영향을 안주는지 알아보자. 우리가 리액트로 개발하며 주구장창 만드는 jsx 컴포넌트는 바벨에 의해 컴파일되어 React.createElement로 변환된다. 정말 기본중의 기본인 두 가지 사용법을 보고가자. 첫번째는 2개 파라미터. 두번째에 props 객체 때려넣기 세번째는 prop을 null로 지정하고, 세번째 인자에 children 넣기 ReactDOM.render(div(), document.getElementById('root')) funct.. 이전 1 2 다음
