본문 바로가기

react2

바닐라 JS로 리액트 만들기 - 3 이전에 컴포넌트 생성까지 구현을 했다.이번에는 상태관리에 대해 알아보고 구현해볼 예정이다.React에서의 상태관리React useState문서리액트에서는 컴포넌트 최상위 레벨에서 useState를 호출하여 state변수를 선언한다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(25); const [name, setName] = useState('정명기'); ... }이때 [변수, set변수] 를 이용하여 이름을 지정하는것이 규칙이므로 주의해야한다.useState함수에 인자로 넘기는 initialState는 상태의 초기 설정값으로 초기 랜더링시에 사용되고 이후에는 무시된다.initialSta.. 2024. 9. 24.
바닐라 JS로 리액트 만들기 - 2 이전의 웹팩과 바벨 설정이 끝났다면 createElement함수부터 구현을 해야한다.리액트의 경우 React.creatElement 메서드를 사용하여 프레임워크에서 자동으로 jsx를 변환해주지만 이번 프로젝트에서는 직접 프레임워크를 만들어볼 예정이므로 createElement부터 구현하기로 했다.React에서 createElementReact 공식문서위 공식문서를 보면 createElement는 3가지의 인자를 받는다.const element = createElement(type, props, ...children)type : 어떤 종류의 태그를 사용하는지porps: 해당 요소의 속성은 무엇이 들어가는지children: 해당 태그의 자식요소는 어떤것이 있는지를 입력받고 이를 이용하여 리액트 엘리먼트를 반.. 2024. 9. 24.