state2 state, props, 리액트 리렌더링 - State state는 변수를 선언할수 있다. 그러나 state가 let이나 const와 다른점은 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 다시말해 값이 변하게 되면 연관있는 컴포넌트들이 재렌더링이 되어 화면이 바뀌게 된다. 이때 state와 함께 사용 되어 값을 바꿔줄 수 있는 것이 함수가 setState이다. function user() { const [ gender, setGender ] = useState("male") const genderHandler = () => { setPhone(phone === "male" ? "남자" : "여자"); } return ( 나는 {gender}이야. Change ); } gender 이라는 변수명에 male 이라는 초기값을 넣었고, c.. 2023. 7. 3. Virtual Dom, State, props Virtual Dom 을 다루기 전에 먼저 Dom 을 알아보겠다. DOM 이란 Document Object Model(문서객체모델)의 약자다. - 문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 들을 객체 (object) 로 만든 것이다. 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다. 근데 이돔의 문제점은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다. 새롭게 구성하기 때문에 렌더할 양이 많으면 속도가 느려지게 된다. 그래서 나온게 Virtual DOM(가상돔) 이다. (특징) - DOM 의 구조를 흉내낸 JavaScript 객체이다.(트리구조로).. 2023. 6. 25. 이전 1 다음