[고찰] React에서 배열 요소 삭제시 배열을 복사해야 하는 이유에 대한 고찰

react에서 배열 자료를 다룰 때에는 copy본을 만드는게 좋다. 처음 배울 때에는 원본 배열을 남겨놓는게 좋으니 그러는가보다 하며 넘겼는데, 방금 겪어보니 이유를 알겠다. 아래가 내가 해결해야 했던 문제다. react에서는 state함수를 사용하여 변수를 다루는데, 아래처럼 const [tags, setTags]=useState(어쩌구) 일 때, setTags()를 이용해야 tags를 변경할 수 있다. //tags 배열 const [tags, setTags] = useState(['a', 'b']); //indexToRemove로 삭제할 인덱스 받음 const removeTags = (indexToRemove) => { //태그를 삭제하는 메소드 작성 }; 그런데 문제는 setTags()를 이용해 배..

• format_list_bulleted Diary/과제, 고찰
• · 2023. 4. 19.
• textsms

[React] Automatic Batching

What is batching? Batching is when React groups multiple state updates into a single re-render for better performance. 출처: https://github.com/reactwg/react-18/discussions/21 Automatic Batching 리액트18에서부터 추가된 기능이다. 하나의 이벤트 내에 여러개의 상태 변화가 있을 경우, 이들을 모아 한 번의 렌더링으로 처리한다. 이로 인해 불필요한 렌더링을 줄일 수 있다. 하나의 이벤트 안에 같은 상태 변화를 여러번 진행하게 되면, 내부에서는 코드가 순서대로 돌아가더라도 한 번의 렌더링으로 마지막 변화밖에 보여주지 않기 때문에, 하나의 이벤트 안에서 상태변화를..

• format_list_bulleted SW공부/React
• · 2023. 4. 19.
• textsms

[Error Note] React component names must start with an uppercase letter

React Hook "useEffect" is called in function "saleContent" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" 컴포넌트 이름의 시작을 대문자로 지정하지 않아서 생긴 간단한 오류. 67번째 줄과 컴포넌트 호출해주는 부분을 saleContent 에서 SaleContent로 변경하여 해결. function을 만들 때 lower camel case가 익숙해서 생긴 실수이며, 지금 만드는 것이 ..

• format_list_bulleted SW공부/Error Note
• · 2023. 4. 19.
• textsms

[UIUX] UI UX란 무엇인가

UI UX UI는 사용자 인터페이스, UX는 사용자 경험을 말한다. 쉽게 말해 UI는 사용자가 사용하는 제품, 시스템, 서비스를 말하는 것이고, UX는 그걸 사용한 사용자의 평가같은 거다. 그렇기때문에 UX는 UI를 포함하는 개념이다. UI 디자인 패턴 모달 (Modal) - 페이지 위에 겹쳐지는 창으로 브라우저 탭이 새로 열리는 것과는 차이가 있음. 토글 (Toggle) - on/off 스위치 탭 (Tab) 태그 (Tag) 자동완성 (Autocomplete) 드롭다운 (Dropdown) - 설문조사 등에서 입력창을 누르면 아래로 선택지가 주르륵 뜨는 것 아코디언 (Accordion) - 누르면 접혀져 있던 내용이 펼쳐지며 상세 내용이 뜸 캐러셀 (Carousel) - 컨베이어 벨트처럼 옆으로 넘어가..

• format_list_bulleted SW공부/그 외
• · 2023. 4. 13.
• textsms

[React] Router 설치

react 사용 중 router 필요한 경우 설치 방법: 터미널 $ npm install react-router-dom //버전 6 설치 $ npm install react-router-dom@6 index.js 을 로 감싸기 root.render( ); import 해오기 import { BrowserRouter } from "react-router-dom";

• format_list_bulleted SW공부/React
• · 2023. 4. 9.
• textsms

[JavaScript] Array().fill().map()으로 배열에 숫자 순차적으로 담기

let arr = Array(n).fill().map((v,i)=>{return i+1}) //n에 필요한 배열 개수 //return을 i+1으로 해주면 1부터 배열에 담을 수 있음. //i로 하면 0부터 한 번씩 필요할 때가 있는데 자꾸 까먹어서 적어둔다. //ex let arr = Array(10).fill().map((v,i)=>{return i+1}) console.log(arr)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

• format_list_bulleted SW공부/JavaScript
• · 2023. 4. 6.
• textsms