React 컴포넌트 위치에 따른 리렌더링(re-rendering)

배열을 전달받아 요소를 목록 태그로 만들어주는 컴포넌트 ChildList 가 있다.

하나는 return 밖에서 useState 를 통해 view 상태에 태그를 저장한 후 jsx 문법으로 사용하였고, 다른 하나는 return 문 안에 직접 태그 형태로 작성해주었다.

input 태그를 이용해 값을 추가시켜 list 에 상태 변화를 일으켜주었지만 useState 를 통해 작성한 view 에는 변화가 생기지 않는다.

React 렌더링을 공부하며 클래스형 컴포넌트에서는 return 문을 render() 함수 속에 작성하는 걸 봐서, return 문 안에 작성된 jsx 만 렌더링 되는구나 하고 짐작할 수도 있지만 직접 눈으로 확인해보고 싶어 예제를 만들어보았다.

※ useEffect 는 return 밖에서 setView 로 상태를 변경하기 위해 이용한것이며, 함수로 선언하여 1회 호출한 결과와 다르지 않음.