여기서 뭘 얻어갈려 하지 마셔요

Props - props로 function 전달 가능 (JSX) HTML 태그의 이벤트 리스너와는 별개의 다른 것. 이벤트시 실행될 함수가 프로퍼티로 들어간 것임. // 방법1. 추천 const Component = ({ name, key }) => ( { name } { key } ) // 방법2. 비추천 const Component = (props) => ( { props.name } { props.key } ) Memo 부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남. 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo(component)로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음. 아주 많은 자식 컴포넌트를 가지고 있는 ..

Vanilla JavaScript와 ReactJS는 노드 변경 처리 과정이 좀 많이 다릅니다. 1. Vanilla JavaScript Vanilla JavaScript에서는 DOM 변경을 직접 처리합니다. 즉, 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행합니다. DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그립니다. 이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능을 저하시킬 수 있습니다. 2. ReactJS ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입합니다. ReactJS에서는 먼저 메..

no JSX 버전 번호는 x.y.z 형태로, 치명적인 버그를 수정할 때는 z 번호를 바꾸고, 새로운 기능을 출시하거나 치명적이지 않은 버그를 수정할 때는 y 번호를 바꾸고, 호환성이 유지되지 않는 변경이 있을 때는 x 번호를 바꾸어 배포한다고 합니다. 그러니까 17과 17.0.2 사이에는 치명적인 버그가 두 번이나 발견되어 수정되었다는 뜻이니 17.0.2를 받으세요! :) ReactJS를 사용하기 위해 아래 두 패키지 설치 필수 react : 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔진과 같다. react-dom : react element들을 가져다가 HTML로 바꾸는 역할 React.createElement("tag", {tag의 property props}, tag의 cont..

*지속성, 성장성, 대중성* 처음 도래한 이후로 더욱 성장하고 있음. 프레임워크로 채택하여 사용하는 대기업 수가 증가하고 이용자가 증가하고 지속적인 업데이트가 되며 이용할 수 있는 관련 라이브러리/패키지가 많고 커뮤니티풀이 매우 크다 기술은 문제를 해결하기위해 만들어진다. 언제나 문제를 정의하고 이해한 후, 문제에 맞는 도구를 선택하자. 리액트는 UI와의 상호작용에 관한 문제를 해결하기 위해 만들어졌다.