천천히 알아가는 세상

안녕하세요. 이번에는 React의 State로 객체, 배열을 사용하는 방법에 대하여 알아보겠습니다. 1. 객체 또는 배열을 State로 사용하는 경우 State는 값이 변경되면 리렌더링을 하지만, 원시 타입의 경우에는 변수에 값이 그대로 들어가 있어서 리렌더링이 발생합니다. 하지만, 객체 타입을 사용하게 되면 변수에는 메모리 주소 값이 들어가 있으며, 메모리 주소에 접속해야 실제 값이 있기 때문에 State의 입장에서는 메모리 값이 변하지 않는 것으로 보이게 되어 리렌더링이 발생하지 않게 됩니다. 이번 코드에서 작업한 거는 메모리 주소를 변경한 것이 아니라 메모리 주소에 연결되어 있는 값을 변경한 것이기 때문에 state에서는 값이 그대로 인 것으로 인식하여 리렌더링이 발생하지 않는다. App.js im..

안녕하세요. 이번에는 React에서 사용하는 변수와 state의 차이에 대하여 알아보겠습니다. 1. State와 변수 우선 코드를 작성해서 확인을 합니다. App.js import './App.css'; import StateAndVariable from './components/StateAndVariable'; function App() { return ( ); } export default App; components/StateAndVariable.js import React, { useState } from 'react'; export default function StateAndVariable() { const [state, setState] = useState(0); let variable = ..

안녕하세요. 이번에는 React의 useState 기능에 대하여 알아보겠습니다. 1. React - State 특수한 기능을 하는 변수라고 생각하면 된다. 컴포넌트에 대한 상태를 의미한다. State가 변경되면 해당 컴포넌트를 다시 렌더링 하기 때문에, 컴포넌트의 유동성 관리가 쉽다. 2. 일반 JS로 사용하였을 때 App.js import './App.css'; function App() { const teacher = '새싹'; function inEnglish() { const spanEl = document.querySelector('.App > span'); spanEl.innerHTML = 'sesac'; } return ( inEnglish()}>영어로! {teacher} ); } expor..