react

📔Hook이란? ✍️ Hook의 정의 Hook은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태)관리와 lifecycle(라이프사이클)관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미 Hook들의 모음을 Hooks라고 한다. ✍️ Hook 등장 배경 클래스 컴포넌트와 함수 컴포넌트 리액트에서 컴포넌트는 클래스형과 함수형으...

Westagram Login 진행 중, 정규식 조건을 거쳐 형식에 맞지 않을 경우 아래의 사진처럼 errorMessage를 보여주고, 로그인 형식이 맞다면 Main 페이지로 넘어가도록 구성하고 싶었다. 아래는 validator를 check하기 위한 나의 코드 아이디와 비밀번호 정규식을 test를 돌려서, 그 결과가 true이면 navigate를 태워 ma...

📝Props의 정의 props란 컴포넌트의 속성값을 의미하며, 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props를 이용해서 전달하고자 하는 어떤 값이든(변수, 함수, state값, event handler 등..) 모두 자식 컴포넌트에 전달할 수 있다. 📝Props는 언제 사용할까? 🖍 부모 컴포넌트에서의 데이터 ...

React로 인스타그램 댓글을 구현 시, map 함수를 사용하게 된다. 이 map함수를 사용할 시 key prop을 부여해야만 한다는 사실을 알게되어서 기억하고자 블로그에 작성한다! 🧐Map map() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로우 배열을 반환하는 함수이다. 위와 같은 형식으로 작성되며, 매개변수 ...

📕Side Effect란? 📔Side Effect 개념 side effect를 번역하자면 부작용 정도로 번역이 된다. 프로그래밍에서의 부작용은 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있다. 특히, 프로그램을 이루는 가장 작은 단위인 함수에서 쓰이는 용어이다. 프로그래밍에서 함수의 주된 목적은 Input을 받아서 output을...

📓useEffect Data Fetching, 구독 등의 side effect는 매우 조심스럽게 다뤄야 한다. 리액트에서 side effect는 언제 어떻게 발생시켜야 할까 ? 📙React에서 side effect의 올바른 발생 시점 위의 코드에서 Hello World형태의 JSX를 브라우저에 렌더링 한다. 이 상황에서 side effect를 발생시...

컴포넌트를 나누어 props를 받아와 comment 컴포넌트 구현을 하던 중, 오류는 없지만 코드상으로 노란줄이 찍히면서 아래의 문구가 찍혔다. Must use destructuring props assignmenteslintreact/destructuring-assignment 처음엔 무시할까.. 하다가 아무리 오류 내용을 찾아봐도 알 수가 없어 멘토님께...

📓상수 데이터 📙상수 데이터란? 페이지를 구성하다 보면 UI 구성에는 필요하지만 값이 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있다.이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있다. 즉, 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 의미한다. GitHub 페이지를 예로 들어 상단의 드롭다운 메뉴는 ...

📓Mock Data 📙 Mock Data란? UI 구성에 필요한 백엔드 API가 완성되기 전에 프론트엔드는 데이터가 들어오는 상황에 대비해 의도한대로 UI가 구현되는지 확인을 해야한다. 이때 사용되는 데이터가 Mock Data이다. 즉, 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다. 📙Mock Data...

📓동적라우팅 라우팅을 설정하는 가장 기본적인 방법은 정적(static, pre-defined)라우팅이다. 즉, Router 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식이다. 하지만, 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 방식으로는 처리가 힘들다. 정적 라우팅...

📔Framework와 Library 프레임워크와 라이브러리는 복잡한 개발을 효율적으로 하기 위해 다른 개발자들이 만들어둔 코드라는 공통점이 있다. 차이점은, 프레임워크는 만들어둔 코드의 정해진 틀(frame)속에서만 수동적으로 작업(work)해야 하지만 라이브러리는 개발자가 작업을 진행할 때 필요한 기능을 찾고(library) 능동적으로 가져와서 사용...