I'm a Fig, Not a Pig

1. 라우트로 페이지를 나누는 법을 설명해주세요. react에서 router를 구현할 때 react-router-dom의 BrowserRouter, Routes, Route, Link 컴포넌트를 사용한다. 먼저 BrowserRouter은 react-router-dom 컴포넌트를 감싸는 최상단에 위치한다. 이후 Routes 하위에 경로에 따라 Route의 element에 전달한 컴포넌트로 분기하는 식이다. Route의 컴포넌트의 path props 으로 경로를 지정하고 element props 에 보여줄 컴포넌트를 지정하면 된다. 2. useParam에 대해 설명해주세요. useParams은 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶을 때 사용하는 훅이다. 사용방법은 다음과 같다. 1)..

https://codingtoddlerr.tistory.com/231 위 글을 작성하고 나서 궁금한게 생겨 글을 쓴다. 리액트가 상속보다 조합에 특화된 언어이기 때문에 여러 컴포넌트를 import 하는 방식으로 조합해서 사용하는 것이 재사용성과 유연성 증대에 이점이 된다는 것은 알겠다. 그러면 많은 수의 컴포넌트를 import 하는 경우 import 구문이 엄청 길어질 것 같은데, 이것들은 어떻게 처리하면 좋을지에 대해 궁금했다. 찾아본 방법은 다음과 같다. 1. index.js 파일 생성 다음과 같은 코드가 있다고 하자. App.js Register Close × Register 폴더 구조는 아래와 같다. 중요한 점은 해당 폴더 내의 컴포넌트를 모두 한 번에 내보내는 파일로 각 index.js 를 생성..

리액트에는 DRY 원칙이라는 개념이 있다. "Do no Repeat Yourself" 개발을 할 때 동일한 소스코드가 반복되는 것을 막으라는 뜻이다. 동일한 소스코드가 반복되는 경우 추후 수정사항이 생기면 반복되는 모든 코드를 찾아서 수정 해야 하기 때문에 잠재적인 버그의 위협을 증가시킨다. 이것은 프로젝트의 규모가 커질수록 반복되는 코드로 인한 유지 보수 오버헤드가 커지게 되므로 작은 프로젝트부터 코드를 반복해서 사용하지 않는 습관이 중요하다. - 오버헤드란? 오버헤드란 프로그램의 실행흐름에서 나타나는 현상중 하나로, 예를 들어 프로그램의 실행흐름 도중에 동떨어진 위치의 코드를 실행시켜야 할 때 추가적으로 시간,메모리,자원이 사용되는 현상이다. 한마디로 정의하자면, 오버 헤드는 특정 기능을 수행하는데 ..

1. 'setState'는 비동기처럼 동작하지만 비동기 함수는 아니다 (O, X) 답: O 2. 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요. 엘리먼트는 자바스크립트 객체고, 리액트로 화면을 그려내는 데에 가장 기본적인 요소이다. 엘리먼트는 한 번 생성되면 다시는 변형되지 않는다. 반면 컴포넌트는 엘리먼트를 반환하는 함수 혹은 클래스를 의미한다. 재사용성을 강조하여, 엘리먼트를 좀 더 자유롭게 다룰 수 있으며, 컴포넌트의 이름을 사용하여 하나의 태그처럼 사용할 수 있다. 3. 함수형 컴포넌트의 장점은 무엇인가요? 클래스형 컴포넌트보다 선언이 간편다. 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. 이전에는 라이프사이클 API를 사용하지 못한..

1. Dom과 Virtual Dom의 차이점에 대해 설명해주세요 - DOM(Document Object Model)은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이며 트리 데이터 구조로 표현된다. - Virtual DOM은 실제 DOM의 가상 표현으로, 메모리 상에 있는 DOM의 트리 구조를 표현한다. 쉽게 말해 DOM과 같은 내용을 담고 있는 복사본이다. 2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요 - 제어 컴포넌트는 상태를 직접 관리하고, 입력 필드나 선택 요소의 값이 변경 될 때 상태를 업데이트 한다. - 비제어 컴포넌트는 상태를 직접 관리하지 않고, 입력 요소에 대한 레퍼런스를 사용하여 값을 가져오거나 설정한다. 이러한 컴포넌트는 입력 값이 변경 되더라도 ..

1. JSON.parse(), response.json() 차이점을 설명해주세요 JSON.parse()와 response.json()은 둘 다 JSON 데이터를 다루는 데 사용되지만, 사용 환경과 역할에 차이가 있다. 1. JSON.parse() 주로 문자열 형태의 JSON 데이터를 파싱하는 데 사용된다. 입력으로 문자열을 받아 JavaScript 객체로 변환한다. 클라이언트 측 코드에서 JSON 데이터의 문자열 표현을 JavaScript 객체로 변환하는 데 사용된다. 예를 들어, API에서 가져온 문자열 데이터나 로컬 스토리지에서 가져온 JSON 문자열을 파싱할 때 사용한다. const jsonString = '{"name": "Alice", "age": 30}'; const jsonObject = J..

목차 1. ref prop 2. useRef 3. 예제 1. ref prop JavaScript 를 사용 할 때는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생하는데 이 때 ref라는 것을 이용한다. 사용 예시는 크게 두 가지로 나눌 수 있다. 1. DOM 요소 참조 useRef를 통해 특정 DOM 요소를 참조하여 직접 제어할 수 있다. 2. 변수 참조 useRef를 통해 변수의 값을 렌더링 사이클과 관계없이 저장하고 관리할 수 있다. 이렇게 하면 렌더링이 발생해도 값은 그대로 유지되고 값의 변경이 컴포넌트의 리렌더링을 유..

1. 제어 컴포넌트 인풋 태그의 value 속성을 지정하고 사용하는 컴포넌트이다. 리액트에서 인풋의 값을 제어하는 경우로 리액트에서 지정한 값과 실제 인풋 value 의 값이 항상 같다. 이렇게 하면 1. 값을 예측하기가 쉽고 2. 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법이다. 이때 State냐 Prop이냐는 중요하지 않고 리액트로 value 를 지정한다는 것이 핵심이다. 아래 두 경우 모두 제어 컴포넌트이다. function TripSearchForm() { const [values, setValues] = useState({ location: 'Seoul', checkIn: '2022-01-01', checkOut: '2022-01-02', }) co..

1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 답: 3 동기 실행은 코드가 순차적으로 실행되는 방식이다. console.log("1st"); console.log("2nd"); console.log("3rd"); // '1st' // '2nd' // '3rd' 위와 같은 코드를 작성하고 실행해 보면 예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다. 이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리 (Synchronous)라..

1. 빌드, 트랜스파일링, 번들링 각 용어에 대해 설명해주세요 1) 빌드란 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정을 말한다. 대부분은 원하는 프로그램을 만들기 위해 고수준 언어(C, JAVA 등)를 사용해서 코딩을 한다. 하지만 컴퓨터는 0과 1이라는 숫자밖에 모르기 때문에 우리가 사용한 고수준 언어를 컴퓨터는 해석하지 못한다. 따라서 우리가 원하는 프로그램을 만들기 위해서는 우리가 작성한 언어를 컴퓨터가 이해할 수 있는 기계어로 번역해줘야 한다. 즉, 우리가 사용하는 고수준 언어를 기계어로 번역해서 실행 파일을 만들어내는 과정을 '빌드'라고 한다.(빌드의 단계 중 컴파일이 포함되어 있기 때문에 컴파일은 빌드의 부분집합이라고 할 수 있다.) 2) 트랜스파일링 트랜스파일..