rerender

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이 글을 쓰게된 계기 이전 게시글까지 리액트처럼 동작하는 코드를 작성해보았다. 그런데 이전 게시글에서 만든 useState는 한가지 치명적인 문제가 있다. useState를 쓰는 컴포넌트가 조건부 렌더링이 되는 경우, states배열이 망가진다는 것이다. const Component1=()=>{ const [inner,setInner]=useState("컴포넌트1입니다!"); return {inner}; } const Component2=()=>{ const [inner,setInner]=useState("컴포넌트2입니다!"); return {inner}; } const App=()=>{ const [state,setState]=useState..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글을 통해 JSX요소를 객체형태로 변환하는 것 까지 진행했다. 이제 JSX 컴포넌트는 tagName, props객체, children배열을 가진 객체로 관리된다. 그럼 이제 이걸 DOM api를 사용해서 객체를 DOM요소로 변환시키자. makeDOM /** * @param {object} element createElement로 만들어진 요소 * @param {string} element.tagName 요소의 태그 이름 * @param {object} element.props 요소의 속성 객체 * @param {Array|undefined} element...