I'm a Fig, Not a Pig

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) 트랜스파일링 트랜스파일..

1. 리액트에서 명시적으로 key를 지정해야하는 이유를 설명해주세요. Key는 React에서 element list를 만들 때 포함해야 하는 문자열 속성으로, 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 주의할 점은 key 값을 배열의 index로 지정할 경우, 배열의 순서가 바뀌면 key도 변경되기 때문에 key는 id와 같은 고유한 속성을 넣어주어야 한다. 2. 리액트가 화면에 페이지를 그리는 과정을 설명해주세요 props나 state가 변경될 때 리렌더링이라는 과정을 통해서 화면에 페이지를 그린다. 만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 된다. 그린 Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제..

목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..

원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 따라서 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리 공간의 주소를 변경한다.(값의 이러한 특성을 불변성 이라 한다) 다음의 예제를 보자. "hello" + "world"; // "helloworld" 위의 예제를 보면 "hello"와 "world"가 결합되어 좌항의 값이 변경되는 것 같이 보인다. 그러나 실제로는 두 문자열을 합친 새로운 값이 생성된다. 때문에 빈번한 원시형 값의 수정으로 인한 성능 저하를 막기 위해서는 버퍼(Buffer)를 사용하는 것이 권장된다. 1. 버퍼(Buffer) Buffer의 영단어 뜻은 완충제, 완화하다 라는 의미이다. 뜻만 보..