공부 기록용 공부 기록용

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 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 파일로 분리해서 작성한것인데 아직..

컴포넌트를 재사용하고 효율적인 사용방법을 알아보자 아래의 코드는 동일한 스타일을 가진 버튼을 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..

HTML, CSS, JS 로 간단한 카운터 웹 페이지를 구현할때에는 HTML 에서는 span과 button 태그로 생성한 후 두개의 요소를 자바스크립트에서 찾고, 해당 요소에 이벤트를 걸어 감지될때마다 카운트 변수를 업데이트하고 다시 그려내는 작업을 해야했다. Total clicks : 0 Click me 여기서 생각해볼 수 있는 단점으로는 첫번째로 코드가 HTML 태그, JS 코드으로 따로 나누어져 있어 가독성이 최악이다. Click meconst button = document.getElementById('btn');두번째로는 이벤트를 걸어줄때에 반드시 태그에 id 나 class 를 붙여서 요소를 찾아야하고 나중에 실제로 개발할때에는 이름 붙여주고 ..

J-Query 의 필요성 ■ 사용의 편리성이 있다 ■ 크로스 브라우징, 자바스크립트는 브라우저마다 해석하므로 종류나 버젼마다 표현이 안되거나 다르게 되는 경우가 있다 ■ 다양한 플러그인, J-Query 를 기초로 한 유용한 플러그인이 많다 Selector ■ $(this) : 이벤트가 걸린 요소나, 찾을 수 없다면 문서 전체 ■ $('p:first') : p 태그 중에서 첫번째 요소 ■ $(':button') : 버튼 태그 또는 속성인 요소 ■ $('p[=]') : p 태그 중에서 a 속성이 v 값인 요소 ■ $('p[]') : p 태그 중에서 a 속성이 있는 요소 CDN 링크만 연결해서 라이브러리를 가져다 쓰는 방식 https://jquery.com/download/ Download jQuery | j..

JS-DOM (API) ■ 문서 내 객체들을 지정하고 상호작용하기 위한 API이다 Document 내에서 요소를 가져오는 세가지 방법 ■ document 객체에 접근해서 태그, 클래스, 아이디 이름으로 요소를 가져오는 방법 ■동일하지만 쿼리 셀렉터를 통해 복수개의 요소가 있으면 최상위 요소만 가져온다 (구버젼에서는 에러 발생할 수 있음) ■ querySelectorALL 은 복수개의 요소들이 담긴 NodeList 로 반환해준다 (구버젼에서는 에러 발생할 수 있음) // getElements : 갯수에 상관없이 배열에 담아오겠다는 의미 var elemTags = document.getElementsByTagName('h1'); console.log(elemTags); var elemClass = docum..