자바라 잡혀라 자바스크립트

응, 맞아! 한 컴포넌트 안에서 여러 개의 함수를 정의할 때, 객체를 활용해서 key-value 형태로 함수들을 저장하고 필요할 때 꺼내서 실행하는 방식으로 이해하면 돼.이 방법은 코드를 깔끔하게 정리하고 유지보수를 쉽게 만들 수 있는 패턴이야.예제 1: 함수들을 객체에 저장하고 호출하는 기본적인 패턴const MyComponent = () => { // 함수들을 key-value 형태의 객체로 정리 const handlers = { sayHello: () => console.log("Hello!"), sayGoodbye: () => console.log("Goodbye!"), alertMessage: (msg: string) => alert(msg), }; return ( ..

https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech  이진트리를 활용한 프론트엔트 UI설계봐도 완벽히 이해는 안되지만 너무 대단해 보여서 가져왔다..

React key 오류 Warning: Each child in a list should have a unique "key" prop.key값 설정은 최상위 태그에서 이뤄져야 하는데 아래와 같이 잘못 설정하여 오류가 발생했다.  key오류가 발생시 확인해야할 것들 with GPT 1. 리스트 요소의 key 중복문제: key 속성이 중복되거나 고유하지 않아서 문제가 발생할 수 있습니다. 이 경우, key 속성이 설정된 모든 요소가 서로 다른 값을 가져야 합니다. 2. 리스트가 중첩된 경우 => import된 컴포넌트에 key값이 설정되어 있는지 확인문제: 중첩된 리스트에서 key를 설정하지 않거나, key가 중복될 때 문제가 발생할 수 있습니다. 특히, 리스트를 생성하는 컴포넌트가 key를 제대로 설..

map함수 내에서 중괄호를 사용하면 그 안의 코드는 블록스코프를 가지는 코드블록으로 간주됩니다.즉, 함수의 본문으로 해석되기 떄문에 명시적으로 return을 사용해야 합니다.{someArray.map((ele:{ a:string; b:string; c:string; })) => { return( {ele.b} {ele.c} )}}; map함수 내에서 JSX를 반환할 때 소괄호를 사용하면 암시적 반환을 하여 표현식을 바로 반환합니다.{someArray.map((ele:{ a:string; b:string; c:string; })) => ( {ele.b} {ele.c} ))};  암시적 반환 명시적 반환이란? 명시적반환과, 임시적 반환은 자바스..

경로 설정방법1. public- process.env.PUBLIC_URL2. src-import-requrie('경로').default 참고사이트https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a [React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)public 디렉토리 VS. src 디렉토리bok..

App.js import React, { Component } from "react"; import './App.css' import Header from "./Header"; import Cardlist from './Cardlist' class App extends Component{ state = { serverData : [], flag : true, filteredData: [], enterSignal : true } // 검색하기 searchItem = (keyWord) => { // 검색어를 내려줘야한다 // e.preventDefault() const { serverData, filteredData } = this.state this.setState( prevState => ({ filte..

// 사이드바 만들기 App.js import './App.css' import React, { Component } from "react"; import Sidebar from "./Sidebar"; import Button from './components/Button'; const menus = [ // 메뉴데이터 { icon: '♜', title: 'HOME' }, { icon: '♞', title: 'ABOUT' }, { icon: '☻', title: 'SETTING' }, { icon: '♜', title: 'HOME' }, { icon: '♞', title: 'ABOUT' }, { icon: '☻', title: 'SETTING' } ] class App extends Component{ ..

// 동물 이미지 뷰어 만들기 import './App.css' import React, { Component } from "react"; import images from "./imageData"; import Button from "./components/Button"; class App extends Component{ state={ index : 0 } decreaseIndex = () =>{ const nextIndex = this.state.index - 1 this.setState({ index: (nextIndex < 0) ? images.length -1 : nextIndex}) // index 값이 0보다 작으면, 이미지 배열의 마지 막 사진을 선택한다(images.length - 1)..

// 영단어 삭제하기 App.js import './App.css' import React, { Component } from "react"; import Words from "./components/dummyData"; // import 뒤의 이름은 파일명과 달라도 된다. import Word from "./Word"; class App extends Component{ state={ words : Words } handleRemove = ( id, e ) => { const word = e.target.previousSibling.innerText // previousSibling : 이전 형제 요소 console.log(e.target, word) console.log(id) alert(`해당 단어..

내가 처음에 작성한 코드 sortItem = () => { this.setState({ flag : !this.state.flag, serverData : this.state.serverData.sort((a,b)=> {return this.state.flag ? a.price-b.price : b.price-a.price} ) }) } GPT가 알려준 잘못된 점 주어진 코드에서 this.state.serverData.sort() 메서드를 호출하면, 원본 배열인 this.state.serverData를 직접 변경하는 것입니다. 그리고 이 변경된 배열을 다시 setState 메서드로 설정하여 상태를 업데이트합니다. 그러나 React에서는 상태(state)를 업데이트할 때 직접 원본 데이터를 수정하는 것은 ..