선언형 프로그래밍 vs 명령령 프로그래밍

UI 렌더링 로직 작성법리액트로 로직을 작성할 때 상태에 의존하는 방법과 로직을 하나씩 구현하는 방법이 있습니다. 전자가 선언형 프로그래밍, 후자가 명령형 프로그래밍입니다.선언형 프로그래밍에 의한 구현import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increase );}export default Counter;무엇을 할 지에 초점상태(count)에 따라 UI 렌더링명령형 프로그래밍에 의한 구현 Count: 0 Increase어떻게 할 지 초점DOM을 직접..

• format_list_bulleted FrontEnd/React
• · 2024. 11. 22.

[ React ] 콘솔 창에 로그가 두번 찍히는 문제 해결

현상컴포넌트 동작을 확인하기 위해 출력코드를 입력했다. 렌더링을 할 때마다 콘솔 창에 로그가 2번 찍혔다.  2번 호출 한 것도 아닌데 로그가 2번 이상 찍히는 게 이상했다.코드는 다음과 같다.import { useState, useEffect } from "react";function Hello() { function hiFn() { console.log("Hi :)"); return byFn; } function byFn() { console.log("Bye :("); } useEffect(hiFn, []); return Hello;}function App() { const [showing, setShowing] = useSt..

• format_list_bulleted FrontEnd/React
• · 2024. 10. 28.

[ React ] TypeError: React.useState is not a function 디버깅

문제상황컴포넌트에 상태를 추가했는데 렌더링이 되지 않았다. 개발자도구로 로그를 확인했더니 다음과 같은 메세지가 떴다.HTML  Javascriptconst $root = document.querySelector("#root");function App() { let [counter, modifier] = React.useState(0); const onClick = () => { counter += 1; console.log(counter); }; return ( Total Clicks: {counter} Click ..

• format_list_bulleted FrontEnd/React
• · 2024. 10. 24.