profile
선명한 기억보다 흐릿한 메모

React Link태그 vs a태그

react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성.페이지 이동 기능을 갖고 있는 태그인 a 태그가 있음.Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않음.반면, a 태그는 브라우저의

2022년 5월 3일
·
0개의 댓글
·
post-thumbnail

[PiaSpace] INTERNSHIP Project

oneButton 정렬 sortedUsersData 함수가 호출 될 때 마다 백엔드로 nicknameascending, nicknamedescending 등으로 값이 바뀌면서 넘어감. 컴포넌트 재 사용 메뉴바와 컴포넌트 재사용을 복합적으로 적용 처음 curren

2022년 4월 16일
·
0개의 댓글
·
post-thumbnail

Component 재사용

화면을 구성하는 요소들을 다음과 같이 나누어 볼 수 있습니다두 레이아웃에서 반복적으로 사용되는 요소와 변화되는 요소들이 보이시나요?!변화하는 부분들이 있다고 하더라도 매번 다른 코드로 처리할 필요 없이 컴포넌트화 하여 사용할 수 있습니다.위와 같이 Props를 통해 각

2022년 3월 13일
·
0개의 댓글
·
post-thumbnail

Menu Tab

MenuTab.jsMenuTab.scssFirst.jsSecond.jsThird.js

2022년 3월 13일
·
0개의 댓글
·
post-thumbnail

Pagination & Query Parameter

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됨. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함.흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙함. 많은 웹사이트에서 널리 사용

2022년 3월 5일
·
0개의 댓글
·
post-thumbnail

Routing

다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술.사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림. MPA(Multi Page Application) 대비 페이

2022년 3월 5일
·
0개의 댓글
·
post-thumbnail

Monsters과제

Task 1. API 호출파일: Monsters.js아래 키워드들을 활용해 데이터를 호출 한 후, state에 저장 해주세요!useEffect()fetch() → 호출할 API 주소:https://jsonplaceholder.typicode.com/usersu

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

cleanupEvent

사이드 이펙트를 제거실행 시점컴포넌트가 사라졌을 떄 (ex> 다른 페이지로 이동 했을 때 Login → Main)새로운 콜백함수가 실행되기 직전 → 실행돼서 원래 함수를 제거.최초 렌더링 된 후 한번 만 실행문제점다른 페이지로 넘어갔는데 console.log가 계속 찍

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

useEffect

side Effect들을 함수의 body 자리(render)에서 실행시키면 안됨.함수 컴포넌트의 리턴 값은 UI 요소, state, props의 변화가 있을 때마다 함수가 실행됨. 이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻.또한 렌더링과 무관

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

Side Effect

함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현함수 컴포넌트의 Input이 state, props이고, output이 UI라고 설명함. 함수 컴포넌트 Side Effec

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

조건부 렌더링

조건의 true / false 에 따라 각기 다른 UI 를 렌더링 할 때 사용조건이 true 일때만 특정 UI 를 렌더링 하고 false 일때는 아무것도 렌더링 하지 않도록 할 때 사용변수가 숫자 타입인 경우 0은 false변수가 문자열 타입인 경우 빈 문자열“”도 f

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

mock data

가짜 데이터, 샘플 데이터, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터프론트엔드 개발을 진행하려하는데 필요한 백엔드 API가 완성이 안되었을수도 있음.백엔드에서 API가 완성될때까지 무작정 기다리는 게 아니라 , m

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

상수데이터

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있음변수가 명백히 변하지 않는 상수 데이터라는 것을 표시해주기 위해서 대문자

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

map 함수 적용시 key props를 부여하는 이유

React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 함.Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자

2022년 2월 24일
·
0개의 댓글
·
post-thumbnail

state, props, event

최상위(at the top level)에서만 Hook을 호출함수 컴포넌트 내에서만 사용. 함수 안에서는 hooks호출 불가Hook을 호출할 수 있는 곳이 딱 한 군데 더 있음. 바로 직접 작성한 custom Hook 내에서만장점hooks로 인해 클래스 컴포넌트 함수 컴

2022년 2월 20일
·
0개의 댓글
·
post-thumbnail

React Router, SASS

SPA : Single Page Applicationhtml이 index.html로 하나임.Routing기술을 적용해서 원하는 페이지로 경로에 따라 이동하는 방법이 적용 되어야 함.path 뒤에 들어오는 부분은 어떤 경로로 접근 했을 때 element 안에 컴포넌트 보

2022년 2월 20일
·
0개의 댓글
·

Component & JSX

재활용 가능한 UI 구성 단위재활용하여 사용할 수 있다.코드 유지보수에 좋다.해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)Class형 컴포넌트(Class Component

2022년 2월 20일
·
0개의 댓글
·

React intro

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장Angular2010년 Google에서 개발한 Framework. Type

2022년 2월 20일
·
0개의 댓글
·