내용 state가 배열인 경우에 어떻게 값을 추가하고, 제거하는지 알아보기 배열에 값 추가 전개 연산자(Spread Operator)를 사용해 기존에 지정되어 있던 state를 배열에 담고, 해당 배열 뒤에 값을 추가한 새 배열을 state에 지정한다. 배열 안의 값이 string인 경우 // state 기본값: ["A", "B"] const [arr, setArr] = useState(["A", "B"]); // state에 "C" 추가 setArr(prevList => [...prevList, "C"]); // 결과: ["A", "B", "C"] console.log(arr); 배열 안의 값이 object인 경우 // state 기본값: [{word: "A"}, {word: "B"}] const [a..
서론 리액트에서 배열에 map 함수를 적용할 때, 'Each child in a list should have a unique "key" prop'이라는 콘솔 오류가 뜨는 경우가 있습니다. 오류가 나도 렌더링에 문제는 없지만, 되도록이면 오류는 잡아주는 게 좋기 때문에, 제가 사용한 방법을 공유하려고 합니다. 원인 제가 파악한 선에서 오류가 나는 경우는 3가지가 있었습니다. key 값이 없는 경우 key 값이 잘못 입력된 경우 key 값이 잘못된 위치에 입력된 경우 1. key 값이 없는 경우 key 값이 없는 경우, map 함수 내부에서 return 되는 JSX 코드의 최상위 태그에 key를 prop 형식으로 입력해 주면 됩니다. 코드 예시 최상위 태그 전체 코드 예시 const page = () =>..
https://fonts.taedonn.com Fonts Archive fonts.taedonn.com 셀렉트 박스 외 영역 클릭 시 포커스 해제 개인 포폴 작업 중, 셀렉트 박스 외 영역 클릭 시 셀렉트 박스 포커스가 해제되는 기능이 필요했다. ❌ useEffect만 사용하는 방법 처음 시도한 방법은 useEffect 안에 mouseup 이벤트 리스너를 사용하는 방식. 어느 정도 기능이 구현되긴 했지만, 클릭 시 리액트가 여러 번 리렌더링 되어 다시 포커스 상태로 돌아가는 경우가 있었기 때문에, 다른 방법을 찾아볼 필요가 있었다. 🙆♂️useRef를 같이 사용하는 방법 그 다음 시도한 방법은 useRef를 같이 사용하는 방식. 이 방식은 특정 영역을 감지하는 Ref를 원하는 요소에 지정해서, 해당 영..
리액트는 컴포넌트 단위로 개발합니다. 컴포넌트는 사용자 입장에서 HTML 요소와 크게 다르지 않습니다. 나 태그를 컴포넌트로 만든다고 했을 때, 컴포넌트 내부에서 jsx 문법을 써서 HTML 요소를 return 해서 만들 수 있습니다. 📌 구현할 HTML 요소 Hello, taedonn 📌 index.html => 리액트를 렌더링 할 베이스 파일 📌 렌더링 할 베이스 파일 📌 index.js => index.html에 렌더링 할 리액트 최상위 컴포넌트 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from ..
DOM은 Document Object Model의 약자입니다. DOM은 HTML 요소를 객체(Object)로 만들어 브라우저가 문서 구조에 접근하는 것을 돕는 역할을 합니다. 한마디로 DOM은 문서의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공합니다. DOM을 렌더링 하는 과정 브라우저는 서버가 보내준 HTML 파일을 해석(Parsing)해 DOM 트리를 만든다. 브라우저는 서버가 보내준 CSS 파일을 해석(Parsing)해 CSSOM 트리를 만든다. DOM 트리와 CSSOM 트리를 결합한 렌더트리를 만든다. 렌더트리로 각 객체의 위치와 크기를 계산한 레이아웃을 만든다. 레이아웃이 완성되면 요소를 실제 화면에 구현한다. DOM의 문제점 새로운 요청이나 변경사항이 있을 때마다 전체를 다시 렌더링..
JSX는 JavaScript XML의 약자로, 리액트 컴포넌트의 독립화에 최적화된 언어입니다. JSX는 XML에 코딩하는 것처럼 HTML 코드를 JS 파일에 넣을 수 있습니다. 이러면 별도의 HTML 파일 호출 없이, 하나의 JS 파일로 하나의 컴포넌트를 완전히 구현할 수 있습니다. JSX는 리액트의 개발을 위해 만든 언어이기 때문에, 리액트와 마찬가지로 공식 자바스크립트 문법이 아닙니다. 문법 1. 카멜 케이스(Camel Case) 네이밍 규칙을 사용한다. JSX에서는 데이터가 객체로 전달되기 때문에 HTML 대신 카멜 케이스 네이밍 규칙을 사용합니다. // background-color => backgroundColor // font-size => fontSize 📌 변수에 저장해서 사용할 때 fun..
리액트는 페이스북에서 만든 자바스크립트 기반 라이브러리입니다. 리액트는 컴포넌트라고 하는 독립적인 UI 파편을 만들고, 만들어진 컴포넌트를 조합하여 하나의 뷰를 만듭니다. 리액트 공식 홈페이지에서는 리액트를 이렇게 설명합니다. 리액트는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리입니다. '컴포넌트'라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 특징 1. 단방향 데이터 흐름 (Unidirectional Data Flow) 리액트는 리액티브 한 단방향 데이터 흐름을 가지고 있습니다. 리액티브 하다는 건 상태(State)가 바뀌면 뷰(View)도 바뀐다는 뜻이고, 단방향 데이터 흐름은 데이터가 한 방향으로 흐른다는 뜻입니다. 리액트..
