피리부는 사나이 (pied piper)

useRef : 순수 자바스크립트 객체를 생성한다 값의 접근은 refContainer.current로 할 수 있다. const refContainer = useRef(initialValue); useRef를 사용해야하는 상황 렌더링 상관없이 값을 변경해야할 때 컴포넌트 태그에 직접 접근해야할 때 리액트에선 useRef를 사용한다. (바닐라 js에서는 querySelector or getElementById) 결국에는 useRef는 렌더링 없이 접근한 태그 요소의 값을 바꿀 때 사용하는 것 (data, state 상관없이 component에 DOM을 제어하고 싶을 때 ref를 사용) 단 Ref는 남발하지 않는 것이 좋다 ref 없이 구현할 수 있는지 고려 후 사용하는 것이 중요 재사용면에서 Ref는 전역..

한 번에 수많은 데이터가 존재한다면, 같은 코드를 단순하게 반복하여 작성할 수 있다. 하지만 매우 비효율적이다. 이때 map 함수를 이용하면 효율적으로 데이터 결과를 나타낸 컴포넌트 리스트를 만들 수 있다. map() 메서드는 리스트 내 모든 요소 각각에 대하여 함수를 호출한 결과를 모아 새로운 배열을 반환한다. [리스트].map((i) => {return 로직} function App() { return ; } function Hello(props) { const name = props.name; const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //1~10호를 만들 것입니다. // list map을 이용하여 h1 태그들의 리스트를 만듭니다. const numCompone..