본문 바로가기
728x90

DEV36

React : map함수 적용시 key props를 부여하는 이유 📕 key?Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이며, 대부분의 경우 데이터의 ID를 key로 사용한다.📕 key props를 부여해야하는 이유?React에서는 key의 값을 통해서 어떤 아이템에 변화가 있었는지를 인식한다.하지만 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 렌더링을 진행한다.따라서 map을 사용할 때는 고유한 key값을 반드시 사용해줘야 한다.map의 두번째 인자인 index를 사용하는 것보다는 좋아요, 삭.. 2024. 10. 20.
Design : UI 컴포넌트 종류 및 특징 📕 컴포넌트란?위로 다른 요소와 구분하고, 행동하고 반응하고, 현재상태에 대한 정보를 전달 해야한다.Status bar•디바이스의 현재 상태에 대한 정보를 표시•모든 방향에서 화면의 상단에 사용자가 설정해둔 디바이스의 현재상태및 각종 정보 노출•(네트워크연결, 비행기, 진동, 알람 등 사용자가 설정한 각종모드/ 푸시 알람 배터리 잔량 )•예전에는 스페이스바를 건들 수 없었는데 이젠 가능App bars: top•스테이터스바 바로 아래 위치• OS별 제공하는 기능이 조금씩 다르고 각기 다른 이름으로 호칭,•안드로이드의 액션바는 주로 액션실행이 가능한 버튼 위치• IOS의 네비게이션 바는 말그대로 상위 하위 뷰로 이동가능한 네비게이션 역할App bars: bottom•하단 앱바는 현재 화면의 맥락에 사용할.. 2024. 10. 20.
Map Method 이해하기 📘 Mapmap() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환한다. for of forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류인데, 조금 독특한 부분은 매 반복마다 returm되는 결과에 따라 새로운 배열을 만들어 낸다는 것이다.First ex)const array1 = [1, 2, 3, 4, 5];const map1 = array1.map(x => x* 2);console.log(map1); { return currentElement * 2;});console.log(map2)map 메서드는 파라미터(매개변수)로 콜백함수를 받는데, 그 콜백 함수의 파라미터는 요소, index, 그리고 현재 메서드를 호출한 배열이다.Secon.. 2024. 10. 20.
React : State, Props, Event 📕 Hook 이란?React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리라고 할 수 있다.📕 Hook의 특징함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로서로의 장점을 전부다 가지고 있다선택적 사용 : 기존의 코드를 다시 작성할 필요 없이, 일부의 컴포넌트들안에서 Hook을 사용할 수 있다. 하지만 당장 Hook이 필요하지 않다면 사용하지 않아도 된다.100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다.Hook은 알고 있는 React 컨셉을 대체하지 않음 : 대신, Hook은 prop, state, context,.. 2024. 10. 20.
React : SPA & SCSS 📕 SPASingle Page Application (싱글 페이지 어플리케이션)의 약자이다.즉, 페이지가 1개인 어플리케이션이란 뜻으로 유저가 요청 할 때 마다 페이지가 새로고침 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 발생하고, 불필요한 트래픽으로 인한 낭비가 심해지기때문에 리액트 같은 라이브러리 혹은 프레임 워크를 사용해서 뷰렌더링을 유저의 브라우저가 담당하도록, 하고 어플리케이션을 브라우저에 로드한 다음 필요한 정보만 보여준다.📌 싱글페이지라고 해서, 한 종류의 화면만 있는가?그건 No. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있다.다른 주소에 따라 다른 뷰를 보여주는것을 라우팅이라 하며, 리액트 자체에는 이 기능이 내장되어있지 않는다. 따.. 2024. 10. 20.
React 📕 Frontend-Framework(Library)" Angular VS Vue VS React "Angular: TypeScript 기반으로 안정적이고 탄탄한 app개발이 가능하며,Framework답게 다향한 기능이 내장되어있다. 하지만 무겁고 배우기가 어렵다는 단점을 가지고 있다.*Vue *: Evan You라는 개인이 개발한 프레임워크로 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만, 성장 속도가 정말 빠른 편이다.React: MVC(Model-View-Controller) Architecture(Angular,Vue)와는 다르게 리액트는 오로지 View만 담당한다. 내장된 기능이 부족해 Third-party라이브러리인 React-router, Redux를 함께 사용한다.페이스북의 지.. 2024. 10. 20.
728x90
반응형

티스토리툴바