React ⚛️31 [React] 배열 컴포넌트 사용 시 key 값으로 index를 사용하면 안되는 이유 key prop Error Element 배열 사용 시에 배열의 각 요소에 대해 key 값을 prop으로 전달해주지 않으면 위와 같은 에러가 발생하게 된다. React 에서의 key const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와줍니다. key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 합니다. const todoItems = todos.map((todo) => {todo.text} ); Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 .. 2023. 7. 17. [React] 클래스 컴포넌트와 함수 컴포넌트 / HOC(Higher Order Component와 React Hook React에서 클래스 컴포넌트를 사용하였던 이유 React의 함수 컴포넌트는 클래스 컴포넌트보다 더 짧고 간결한 코드, 높은 가독성, 더 빠른 성능, 보다 적은 메모리 사용이라는 장점을 가지고 있었지만 상태 관리나 컴포넌트의 생명주기(LifeCycle)를 관리할 수 없다는 단점으로 인해 클래스 컴포넌트를 사용하고 있었습니다. 하지만 React 16.8 버전에서 Hook 이라는 개념이 등장하고 난 뒤로 함수 컴포넌트를 주로 사용하게 되었고, React 에서도 함수 컴포넌트 사용을 권장하게 되었습니다. 상태(State) 관리 👉🏻 useState Hook 생명주기 관리 👉🏻 useEffect Hook React Hook의 또 다른 장점 HOC(Higher Order Component) 란 ? HOC(High.. 2023. 7. 16. [CRA] npx create-react-app 에서 npx란 ? npx ? npm ≠ npx npm(node pacakage module)의 5.2.0 버전부터 새로 추가되어 기본 패키지로 제공되기 시작했다. npx는 npm 레지스트리에 있는 패키지를 더 쉽게 설치하고 관리하도록 도와주는 CLI(Command-line interface) 도구이다. npm을 더 편하게 사용하기 위해 탄생한만큼 npm을 통해 설치하는 모든 종류의 Node.js 기반의 파일을 간단하게 설치 및 실행할 수 있도록 도와준다. 즉, npx는 노드 패키지 실행을 도와주는 도구이다. 따라서 npx create-react-app이란 'create-react-app'이라는 npm 레지스트리에 있는 패키지를 특정 경로에 실행해서 리액트를 설치해준다. 2023. 7. 14. [React-query] 리액트 쿼리를 사용하는 이유 및 useQuery / useMutation 사용법 1) React-query란 ? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. react-query에서는 기존 상태 관리 라이브러리인 redux, mobX가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 언급한다. 클라이언트 상태(Client State)와 서버 상태(Server State)는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터베이스에 저장되어 있는 데이터로 예를 들 수 있다. 2) React-query를 사용하는 이유 가장 기본적.. 2023. 6. 2. [React] 리액트로 디바운스(Debounce) 구현하기 이전에 Javascript Deep Dive 41장에서 타이머에 관한 내용을 다룬 적이 있다.( https://woohyun-king.tistory.com/136 ) [JS Deep Dive] 41. 타이머 41.1) 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약에 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후에 호출되도록 함수 호출을 "예약"하기 위해서는 Timer 함 woohyun-king.tistory.com 디바운스와 스로틀은 모두 짧은 시간 간격으로 연속으로 발생하는 이벤트 핸들러의 과도한 호출을 방지하기 위한 프로그래밍 기법이다. 그 중에 디바운스는 짧은 시간 간격으로 이벤트가 연속으로 발생하면 이벤트 핸들러를 호출하지 않다가, 일정 시간이 경과한 후에 이벤트 .. 2023. 5. 17. [React] useContext Hook의 사용법 및 상태 관리 라이브러리와의 차이 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다. (출처: React 공식 문서) 1) useContext Hook 이란? 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때, 보통 props를 통해 데이터를 전달하는데, 그 깊이가 깊어진다면 거쳐가야 하는 컴포넌트도 많아진다. 또한 해당 props를 사용하지 않는 컴포넌트까지 중간에 거쳐가게 되는 상황이 올 수 있다. 그렇게 된다면 코드를 반복적으로 .. 2023. 4. 12. 이전 1 2 3 4 5 6 다음
