천천히 알아가는 세상

안녕하세요. 이번에는 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 = ..

안녕하세요. 이번에는 저번에 알아봤던 전개 연산자의 추가 내용입니다. 1. 기본 사용 방법 const arr = [1, 2, 3, 4, 5]; console.log(arr); console.log(...arr); 2. copyArr const arr = [1, 2, 3, 4, 5]; // arr의 메모리 주소값을 copyArr에 대입한 결과가 된다. const copyArr = arr; console.log(copyArr); // 메모리 주소 값을 비교하는 상황이라서 True가 출력된다. console.log(arr === copyArr); copyArr에 arr의 메모리 주소 값을 복사합니다. 해당 메모리 주소 값에는 arr의 [1~5]가 있으니 copyArr도 동일하게 출력합니다. arr === co..

안녕하세요. 이번에는 React에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다. 1. 삼항 연산자 삼항 연산자를 이용하여 React 코드 작성하기 App.js import './App.css'; import Condition from './components/Condition'; function App() { return ( ); } export default App; components/Condition.js import { useState } from 'react'; export default function Condition() { const [condition, setCondition] = useState(true); return ( setCondition(!condition)}>컨디션 ..

React.Fragment를 간략하게 사용하는 방법입니다. 우선 components 폴더의 component 작성 시 wrapping 태그가 필요합니다. return 할 때 최상위 태그 1개에 묶여 있어야 합니다. 태그로 묶여 있는 코드 return ( inEnglish()}>영어로! {teacher} ); 방법 1 div, span 등 return ( your code ); 방법 2 == 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다. return ( your code ); 방법 3 Fragment 사용하는 경우에는 import가 필요합니다. 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다 import { Fragment } from 'react'; ..