동이의 개발일지
기술면접 리액트 본문
1. 리액트란 무엇인가 (특징)
- 페이스북에서 개발한 웹을 개발할 때 사용하는 프레임워크로 자바스크립트 라이브러리의 하나입니다. 리액트의 특징으로는 단방향성 데이터 흐름을 갖고 있는 것과 가상 돔을 사용하여 메모리를 효율적으로 사용하고 가독성과 유지보수가 용이하며 컴포넌트 기반으로 이루어져 있어 코드의 수정이 쉽습니다 그리고 JSX문법을 사용하고 Props와 State를 사용하는 특징을 갖고 있습니다.
2 .리액트의 장점
- 리액트의 장점으로는 컴포넌트를 기반하기 하여 개발을 하기 때문에 코드의 가독성과 유지보수가 쉬우며, 가상돔을 사용하여 개발하기 때문에 리렌더링이 적어 메모리 부분에서 장점이 있습니다. 가장 큰 장점이라고 생각하는 것은 리액트를 사용하는 개발자들이 많기 때문에 앵귤러와 뷰와는 다르게 방대한 생태계가 있다는 점이 가장 큰 장점입니다.
3. 리액트는 hook이라는게 있는데. hook의 종류 3가지와 그 활용
- hook은 리액트와 같은 프런트엔드 라이브러리에서 함수형 컴포넌트에서 상태관리나 생명주기와 같은 기능을 사용하게 해주는 자바스크립트 함수를 말합니다. 클래스형 컴포넌트에서만 사용할 수 있던 기능을 함수형 컴포넌트에서도 사용 가능하게 해 주며 코드의 재사용과 코드의 가독성을 높여줍니다 hook의 종류로는 여라가지가 있고 본인이 필요에 따라서 커스텀 훅을 만들어서 사용할 수 있습니다 hook의 종류로는 useState() 상태를 관리해 주는 훅이 있고, useEffect() 컴포넌트의 생명주기는 관리할 수 있는 훅입니다 함수가 마운트 원마운트 업데이트 됐을 때 특정한 시점에 실행될 로직을 설정할 수 있습니다. 마지막으로 useContext가 있는 react Context를 관리해주는 hook입니다. useContext를 사용하면 Context에서 제공하는 값을 가져와서 사용할 수 있습니다. 직정 사용해 본 경험으로는 useState와 useEffect를 가장 많이 사용한 것 같습니다.
4. ts, js의 차이점
- 코드에서도 큰 차이점이 있는데 자바스크립트에서는 변수에 타입을 직정해주지 않습니다. 하지만 타입스크립트에서는 타입을 지정하여 코드를 작성한다는 차이점이 존재하고 컴파일하냐 런타임 이냐에 차이점 있습니다. 또한 타입스크립트는 자바스크립트에 비해서 엄격한 문법을 갖고 있습니다 그래서 타입스크립트보단 자바스크립트가 유연성이 있고 생산성이 더 좋습니다. 그에 비해 타입스크립트는 IDE결합성이 놓고 가독성과 유지보수가 좋습니다.
5. 가상돔이란 무엇인가?
- 돔을 추상화한 가상의 객쳄를 말합니다 돔을 반복적으로 조작하면 그만큼 브라우저가 렌더링을 지속하고 그만큼 pc자원을 많이 소모하게 되는데 이 를 해결하기 위해 나온 것이 가상돔입니다. 이벤트가 발생할 때마다 가상 돔을 만들고 다시 그릴 때마다 전후 상태를 비교합니다. 변경이 필요한 최소한의 변경사항만 실제 돔에 반영하여 앱의 효율성과 메모리 문제를 해결할 수 있습니다.
6. JSX문법이란
- 자바스크립트를 확장한 문법입니다. 특징으로는 태그안에 감싸져야 하면 if문 대신에 상항연산자를 사용하고 표현식은 대괄호 안에 리액트 돔은 html 어튜리뷰트 대신에 cameless프로ㅌ퍼티 명명 규칙을 사용합니다.
7. props and state의 차이
- props는 부모로 부터 상속받아 자식은 값을 변경할 수 없지만 state는 컴포넌트 내부에서 값을 선언하면 내부에서 값을 변경할 수 있습니다.
8. class와 classname의 차이점
- class는 html에서 사용하는 특성을 갖고 있으며 classname은 react에서 사용되는 요소 중 하나인데 렌더링 할 때는 html요소인 class로 변환되기 때문에 html문법을 지킬 수 있습니다. 이렇게 사용하는 이유는 jsx와 javascirpt의 충돌을 피하기 위해서입니다. 그리고 jsx의 속성변화과 코드일과성과 유지보수성로 인한 이유도 있으며 classname을 사용하는 것이 바바사 크립트와 충돌을 피하며 코드를 일관되게 유지하는데 도움이 되기 때문입니다.
'웹 개발 > 면접 질문 및 웹 관련 질문' 카테고리의 다른 글
웹 기본 질문 (0) | 2024.07.21 |
---|---|
회사 개인 질문 (0) | 2024.07.17 |
면접 질문 메뉴를 생성한 이유~ (0) | 2024.07.07 |
웹 표준, 접근, 호환 정리! (0) | 2024.07.01 |
웹 호환성(Cross Browsing) (0) | 2024.07.01 |