공부 기록용 공부 기록용

나의 할일을 입력 태그에 작성하고 Add To Do 버튼을 누르면 할일 리스트에 추가되면서 리 랜더링되는 간단한 투두리스트이다. 중요한 부분은 Submit 이벤트를 form 태그에 걸어두고 제출 이벤트가 감지되면 서버로 보내지 않고 왜냐하면 보낼 서버가 없음. 할일 목록을 저정하는 toDos 에 추가하고 li 태그로 리 랜더링한다.  Add To Do# 제출 이벤트를 감지해서 const onSubmit = (event) => { # 고유 동작을 중지시킨다.(submit 을 중지) event.preventDefault(); if (toDo === "") { return; } # [1, ...] -> [1,2,3,4] 으로 리스트가 반환된다. 유용함! ..

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.import Button from "./Button";import styles from "./App.module.css";import { useState, useEffect } from "react";function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); co..

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.import Button from "./Button";import styles from "./App.module.css";import { useState, useEffect } from "react";function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); co..

Button.js// Button 컴포넌트를 정의합니다. 이 컴포넌트는 props로 'text'를 받아서 버튼에 표시합니다.function Button({text}) { // JSX를 사용하여 버튼 요소를 반환합니다. 버튼 요소 안에 props로 전달된 'text'가 표시됩니다. return {text};}// Button 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.export default Button; App.jksimport Button from "./Button";function App() { return ( Welcome back!!! );}export default App; 컴포넌트를 따른 js 파일로 분리해서 작성한것인데 아직..

설치 하기 앞서서 Node.js 환경이 필요하므로 먼저 설치를 하고 온다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 설치가 정상적으로 이루어졌는지 확인한다.  node -vnpx 관리자 권한으로 실행한 cmd 에서 리액트 환경을 설치할 폴더로 이동한 후 아래의 명령어를 실행해준다. 이때 react-for-beginners 는 프로젝트 이름이므로 아무거나 넣어줘도 상관 없다. npx create-react-app react-for-beginners 정상적으로 설치가 되었다면 설치한 폴더로 이동한 후 ..

컴포넌트를 재사용하고 효율적인 사용방법을 알아보자 아래의 코드는 동일한 스타일을 가진 버튼을 SaveBtn, ConfirmBtn 컴포넌트로 복사 붙여넣기 한 후 텍스트만 변경한 코드이다. 아쉬운점은 스타일을 그대로 복사 붙여넣기 해서 나중에 고치기도 매우 불편하다. 왜냐하면 배경색을 토마토가 아닌 바나나로 바꾼다고 하면 하나하나 찾아가면서 바꾸어줘야한다. function SaveBtn() { return Save Change; } function ConfirmBtn() { return Confirm; } function App() { return ( ..

기존의 바닐라 JS 와 HTML 은 동적인 부분인 자바스크립트와 정적인 HTML 태그로 이루어져서 분리되어있는 구조이다. 이렇게 되면 span 과 button 을 재사용하려면 코드를 복사 붙여넣기해야한다. 이는 코드를 유지보수가 힘들게 하고 아래의 코드에서는 id 와 class 이름을 다 다르게 해줘야해서 번거롭게 btn1 ~ btn4 를 찾는 작업, 찾았으면 거기에 이벤트를 걸어주는 진짜 사람 짜증나게 하는게 많다. Total clicks : 0 Click me Total clicks : 0 Click me Total clicks : 0 Click me Total clicks : 0 ..

리액트를 사용하지 않았다면 아래의 코드 처럼 HTML 태그로 UI 를 먼저 만들어야한다. 하지만 이 방식은 앞서 설명한것 처럼 상호작용하기 위해서 요소에 id 나 class 부여하고 이벤트를 걸어줘야하는 번거로움이 있다. Hello World 리액트를 사용하면 재사용 가능한 요소인 컴포넌트를 정의할 수 있다. 하지만 번거로운 점이 하나 있는게 span 이라는 컴포넌트를 보여주기 위해서 문서에 컴포넌트를 렌더링해 그려내야하는 번거로움이 있다. 컴포넌트는 항상 대문자로 시작해야한다.   React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE (you..