🧑‍💻 작성자: 전민재

📞 깃허브: https://github.com/ssi02014

📞 블로그: https://blog.naver.com/ssi02014

📞 문의: [email protected]

💻 리액트 관련 면접 리스트

⭐ 리액트

• 리액트는 페이스북에서 관리하는, 리액트는 웹 페이지의 컴포넌트를 렌더링하고 빌드하는데 초점을 둔, 가장 인기 있는 자바스크립트 라이브러리이다.
• UI 라이브러리이기 때문에 리액트 자체만으로 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 따라서, 리액트에서 앞선 기능들을 사용하려면 Redux, react-router, webpack 등 추가해서 사용해야 한다.
• 리액트 특징
  • Virtual Dom을 사용해서 빠른 렌더링, 성능 개선이 가능하다.
  • React는 View만 신경 써서 데이터 흐름이 단방향 데이터 흐름을 가진다.
  • 리액트는 UI(View)를 여러 컴포넌트로 쪼개서 만든다.
  • JSX라는 React의 문법이 HTML과 비슷하여 예측 가능 한 개발이 가능하다.

⭐ JSX

• JSX(JavaScript XML)는 JavaScript 문법에 XML을 추가한 확장 문법이다.
• 브라우저에서 실행되기 전 Babel과 같은 트랜스 파일러를 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• 리액트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 자바스크립트에서 HTML 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
• 개발자가 JSX를 작성하면 리액트 엔진은 JSX를 기존 자바스크립트로 해석한다. 이를 선언형 화면 기술이라고 한다.

⭐ JSX 문법

• 반드시 부모 요소 하나가 감싸 있는 형태여야 한다.
  • 예제 소스
• JSX 안에서도 {} 를 사용해 자바스크립트 표현식을 작성할 수 있다.
  • 예제 소스
• if문과 for문 대신 삼항 연산자나 && 연산자를 이용한 조건부 렌더링
  • 예제 소스
• JSX에서 자바스크립트 문법을 쓰려면 {}를 사용해야 되기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어주어야 한다. 또한 camelCase 프로퍼티 명명 규칙을 사용한다.
  • 예제 소스