전체 글

State: A Component Memory 공식문서를 기반으로 리액트 state에 대해 정리해본다. 📝 리액트 공식문서 Components need to “remember” things: the current input value, the current image, the shopping cart. In react, this kind of component-specific memory is called state 컴포넌트는 현재 입력 값을 업데이트 해야 하기 때문에, 이를 기억해 줄 메모리 “State”가 필요하다 컴포넌트를 업데이트 하기 위해서는 지역변수는 렌더하는 동안 지속되지 않는다. 👉🏻렌더하는 동안 데이터를 지속시켜야 하고 지역변수의 변화가 렌더링을 트리거하지 않는다. 👉🏻 새로운 데이터와 ..

리액트 라이프 사이클 1. 라이프 사이클의 이해 리액트의 컴포넌트에는 라이프사이클이 존재한다. 이는 페이지에 렌더링되기 전인 준비과정에서 시작해 페이지에서 사라질 때 끝난다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용 가능하다. 함수형 컴포넌트에서는 Hooks를 사용해 비슷한 작업을 처리한다. 2. 라이프 사이클 메서드 라이프 사이클 메서드 용어 용어 설명 ~ will 어떤 '작업을 수행하기 전에 실행되는 메서드와 관련. ~ did 어떤 '작업을 수행한 이후'에 실행되는 메서드와 관련. mount 컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타나는 메서드와 관련. unmount 컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련. update 컴포넌트 내에..

이제껏 개발을 하면서 컴포넌트가 둘로 구분되는지 모르고 있었는데 리액트 스터디를 통해 확실하게 개념을 정리해볼 수 있었다. 학습한 내용을 바탕으로 클론코딩 중인 코드에 Debounce를 적용해보았고 그 과정을 기록해보았다. 제어? 비제어 ? 컴포넌트 React의 폼데이터를 다루는 두 가지 방식 중 하나인 제어 컴포넌트 방식입니다. 폼 데이터를 다루는 데는 제어컴포넌트와 비제어 컴포넌트 방식 두 가지로 특징을 잘 알아야 상황에 따라 폼관리를 최적화할 수 있습니다. 이름 그대로 값이 제어되는 컴포넌트가 제어 컴포넌트, 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 합니다. 순서대로 코드와 함께 개념을 살펴보겠습니다! 제어 컴포넌트 간단히 말해 React가 폼 데이터를 제어하는 방식입니다. HTML에서 와 같은..

📝 면접질문 props와 state의 차이에 대해 설명해주세요. props와 state 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있으므로 비슷해보일 수 있으나 다릅니다. props는 부모 컴포넌트에서 설정해주는 컴포넌트의 속성값으로 함수형 컴포넌트의 경우 인자값으로 전달됩니다. 컴포넌트 자신은 읽기만 가능하여 직접 데이터 변경이 불가하며, 이를 변경하기 위해서는 최상위 부모 컴포넌트에서 변경하거나 추가로 state를 만들어주어야 합니다. state는 컴포넌트 자체적으로 지닌 값으로 내부에서 변경가능한 데이터입니다. 함수형 컴포넌트에서 useState를 사용하여 렌더링 사이에 데이터를 유지하면서, 업데이트가 이뤄질때 리렌더링을 합니다. state는 불변성을 유지해줘야 하여 클래스형 컴포넌트에서는..

문제 설명 링크 https://www.acmicpc.net/problem/16953 문제 정수 A를 B로 바꾸려고 한다. 가능한 연산은 다음과 같은 두 가지이다. 2를 곱한다. 1을 수의 가장 오른쪽에 추가한다. A를 B로 바꾸는데 필요한 연산의 최솟값을 구해보자. 입력 첫째 줄에 A, B (1 ≤ A < B ≤ 109)가 주어진다. 출력 A를 B로 바꾸는데 필요한 연산의 최솟값에 1을 더한 값을 출력한다. 만들 수 없는 경우에는 -1을 출력한다. 예제입력 2 162 5 2 → 4 → 8 → 81 → 162 4 42 -1 100 40021 5 문제 풀이 아이디어 b가 a로 될 때까지 두 가지 연산을 번갈아 진행한다. 연산을 진행할 수 있는 경우는 다음과 같다. 1. b가 2로 나누어지는 수이거나 2. b..

📝면접 질문 작성 VirtualDOM과 DOM에 대해 설명하세요 DOM은 객체를 문서구조로 표현한 것으로 XML이나 HTML로 작성됩니다. 이는 트리형태로 특정 노드를 수정, 삭제, 삽입이 가능합니다. 그러나 노드 하나의 변화에 CSS를 그리고, 레이아웃 변경 후 리페인트를 진행하기 때문에 큰 데이터를 가진 동적인 UI에는 취약합니다. DOM의 성능을 개선하면서 최적의 UX 보장하기 위해 DOM을 추상화한 Virtual DOM이 나오게 되었습니다. 이는 데이터를 업데이트 할때 전체 UI를 Virtual DOM에 리렌더링 한 후 이전 VDOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식입니다.abs 번들러에 대해 설명하세요 모듈들을 하나의 파일로 합쳐 생성합니다. 여기서 모듈은 자바스크립트에 국한되..

오늘은 get요청으로 백에서 넘겨준 액셀파일을 프론트에서 다운받는 코드 작성과 이 과정에서 이해한 걸 기록해보고자 한다. 우선 내가 구현한 건 다운로드 버튼을 눌렀을 때, 백에 get요청을 보내고 응답으로 액셀파일을 받아 다운해주는 것이다. 먼저, API.jsx에 다음과 같이 작성해주었다 export async function getAuditLogFile() { try { const response = await api.get("/audit/excel/downloadAll", { responseType: "blob", }); if (response.status === 200) { return response.data; } console.error("error statuscode", response.sta..

삼항연산자를 중첩해서 사용하니 발생하는 ESLint 오류 Quick Fix 링크를 들어가보니 ternary 즉 삼항연산자를 중첩해서 사용하면 가독성이 떨어지기 때문에 권장하지 않는 것. 권장하지 않는 방식 var thing = foo ? bar : baz === qux ? quxx : foobar; foo ? baz === qux ? quxx() : foobar() : bar(); 권장하는 방식은 밑의 코드처럼 삼항연산자를 한번만 사용하거나! else-if문으로 나눠주는 방식, 사이트엔 없지만 switch도 있다. var thing = foo ? bar : foobar; var thing; if (foo) { thing = bar; } else if (baz === qux) { thing = quxx; ..