react27 React : useState에서 객체와 배열을 다뤄보자 React의 useState 함수의 경우 값이 변경되면 재렌더링을 해준다. 참조형의 경우에는 참조하는 주소(메모리주소)가 변경 되었을 때 값이 변경되었다고 인식하기 때문에 값을 변경한다고 해서 렌더링이 발생하지 않는다. 아래의 로직을 시행했을 때 참조하는 주소가 변경되지 않았기 때문에 버튼을 눌렀을 때 값이 변경되지 않는다.import { useState } from 'react'import './App.css'function App() { const [obj, setObj] = useState({ name: "코딩쥐", addr: "coding-ji.tistory.com" }) function changeName(){ obj.name = "coding-ji" obj.addr.. 2024. 8. 22. React: useState를 통해 변화하는 값을 관리하자 useStateuseState는 컴포넌트 내부에서 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 함수이다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트를 할 수 있다. useState 사용 시에 주의해야 할 사항이 있는데, 컴포넌트의 최상위 레벨에서만 호출이 가능하며 반복문이나 조건문 안에서는 호출이 불가능하다. import {useState} from 'react';useState를 활용하기 전에 react 모듈에서 useState를 불러온다. const[state, setState] = useState(initialState);- state : 현재 상태 변수를 나타낸다.- setState : state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수이.. 2024. 8. 21. React : JSX(JavaScript XML)에 대해서 JSX(JavaScript XML)은 문법적 편의를 제공하기 위해 JavaScript에 XML을 추가하여 확장한 문법이다. 공식적인 JavaScript 문법은 아니지만, 바벨 등과 같은 컴파일러를 통하여 JavaScript로 변환한 후에 사용이 가능하다. JSX의 경우 React.createElement() 호출을 반복하는 대신에 간결하게 작성이 가능하다. JSX가 React의 필수는 아니지만, 공식 웹사이트에서 사용을 권장하고 있다. JavaScriptconst root = ReactDOM.createRoot(document.getElementById('root'));root.render( React.createElement( React.Fragment, null, React.cre.. 2024. 8. 20. 이전 1 2 3 4 5 다음