컨셉트 기본적인 사용법은 리액트와 유사하게 구성하였습니다. 기존의 JSX 문법이 아닌 독자적인 문법을 한번 고안해보고 싶어서 함수 컴포넌트가 객체가 아닌 제가 template 이라고 명명한 특수한 형식의 문자열을 return 하도록 지정했습니다. import useState from "../lib/hooks/useState"; import Counter from "./Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const onReset = () =..

이 글은 Kent C. Dodds 저자의 아래의 글을 바탕으로 작성되었습니다. useEffect vs useLayoutEffect useEffect vs useLayoutEffect The simple rules for when to use each. kentcdodds.com 리액트 훅들 중 useEffect 와 useLayoutEffect 의 기능은 매우 유사합니다. 하지만 분명하게 다른 use case 를 가지고 있죠. useEffect 사실 정말 대부분의 경우, 개발자들은 이 훅을 쓰게 될 것입니다. useEffect 는 컴포넌트의 렌더링이 모두 수행된 후 비동기적으로 동작하는 훅이며, 이를 통해 기존의 componentDidMount, componentDidUpdate, componentWill..

리액트는 어떤 과정을 통해 렌더링을 수행하는가? 전통적인 방식 자바스크립트를 이용한 전통적인 렌더링 방식은 단순했습니다.문자열로 HTML 을 생성하고 그 안에 Data 가 들어갈 부분을 지정하는 것이었죠. 이렇게 Data 와 HTML 이 조합된 문자열을 브라우저가 받아내서 렌더링하도록 만드는 것이었습니다. 하지만 이 전통적인 방식의 문제점은 조금의 변경사항을 반영하고 싶어도 브라우저가 전체를 다시 렌더링하도록 만들 수밖에 없다는 점과 실제로 렌더링 결과물이 바뀌지 않았음에도 새로운 데이터를 받았다는 이유만으로 렌더링이 다시 일어나는 비효율이 발생하는 문제가 있었죠. 리액트의 방식 리액트는 이러한 비효율을 줄이기 위해 JSX라는 새로운 파일 형식을 도입했습니다. JSX를 통해 데이터가 들어가야 할 부분을 ..