천천히 알아가는 세상

안녕하세요. 이번에는 React 컴포넌트 사용 시 배열을 이용해서 출력을 해보겠습니다. 먼저 파일들을 아래와 같이 작성해 줍니다. components/ListChild2.jsx import React from 'react' export default function ListChild2({title, content}) { return ( {title} {content} ) } components/Modal.jsx import React from 'react' export default function Modal() { return ( 오늘 해야할 일 2개 오늘 완료한 일 0개 ) } components/List2.jsx import React from 'react' import ListChild2 from..

안녕하세요. 이번에는 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에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다. 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'; ..