Programming/ReactJS
-
[ReactJS] Components and PropsProgramming/ReactJS 2022. 11. 30. 02:03
Component 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있다. 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 그렇게 하나의 페이지가 완성된다. 함수 형식으로 사용되는데 Props를 입력으로 받아 React element를 출력하는 느낌으로 이해하면 된다. 객체지향의 클래스 및 인스턴스와 비슷한 개념을 가지고 있다. Component는 크게 Function Component와 Class Component로 나뉜다. 함수 컴포넌트는 pure 함수 같은 역할을 해야 하는데, props를 받아와 element를 출력한다. 클래스 컴포넌트는 React.Component를 상속받아서 새롭게 자식 클래스를 만드는 방법이다. Component 이름을 지을 때는 항상 대문자로 시작해야 한다. 그렇지 않을 시..
-
[ReactJS] Rendering ElementsProgramming/ReactJS 2022. 11. 29. 14:47
How to make ReactJS Elements 리액트 Elements는 자바스크립트 객체 형태로 존재하는데, 이 객체는 마음대로 바꿀 수 없는 불변의 형태이다. Element를 생성하는 createElement 함수는 다음과 같다. React.createElement( type, // 'div', 'button' ... [props], [...children] ) Elements 생성 후에는 children이나 attributes를 바꿀 수 없다. 한 번 생성된 다음에는 수정이 불가능하다는 것을 의미한다. Component를 붕어빵 틀이라고 생각하면 Element는 추출된 붕어빵 정도로 생각하면 된다. Root DOM Node const root = ReactDOM.createRoot(documen..