[221024] 오늘의 배움(TIL) - React

💛 nalsae·2022년 10월 24일
1

📚 오늘의 배움(TIL)

목록 보기
67/84
post-thumbnail

🔸 React

  • JSX란 무엇인가?

: Javascript를 확장한 문법
: React의 엘리먼트(Element)를 생성하는 역할을 함, 즉 React.createElement() 메서드를 호출하기 위한 하나의 방법

  • JSX는 어떤 특징이 있는가?

: 기본적으로 HTML 문법 구조와 동일, 이를 Javascript 환경에서 직관적으로 사용할 수 있도록 한 것
: Javascript 안에서 UI 관련 작업을 할 때 JSX를 사용하면 문서 구조를 시각적으로 파악할 때 도움이 됨

  • JSX의 문법적 특징에는 어떤 것이 있는가?

: 중괄호 안에 Javascript 표현식을 삽입하여 사용 가능하기 때문에 일반 변수뿐만 아니라 프로퍼티, 함수 호출문의 반환 값 등을 삽입할 수 있음
: 가독성을 위해 JSX를 여러 줄로 나누는 경우 자동 세미콜론 삽입을 방지하고자 괄호로 감싸주는 것이 좋음
: HTML 어트리뷰트는 문자열(따옴표)을 사용하여 정의 가능
: 중괄호를 사용하면 HTML 어트리뷰트의 값으로 표현식도 삽입 가능

  • JSX 문법으로 어트리뷰트를 정의할 때 주의할 점은 무엇인가?

: 동일한 어트리뷰트에는 따옴표 혹은 중괄호 하나만 사용해야 함, 즉 두 가지를 동시에 사용해서는 안 됨

  • JSX가 XSS 공격을 방지할 수 있는 이유는 무엇인가?

: React DOM이 JSX를 렌더링하기 전에 이스케이프 처리하여 HTML 본연의 태그, 스크립트 기능을 제거하기 때문
: 구체적으로 특수문자를 Entity Code로 변환하기 때문에 자체적인 특수문자의 기능을 상실함

  • React에서 Element란 무엇인가?

: DOM Element와 다르게 일반 객체로 쉽게 생성 가능한 컴포넌트의 구성요소
: React DOM은 React Element와 일치하도록 DOM을 업데이트하는 역할을 함

  • Element의 특징에는 무엇이 있는가?

: 기본적으로 Element는 불변 객체이므로 생성 후에 엘리먼트의 자식 태그나 어트리뷰트를 변경할 수 없음
: Element를 변경하기 위해서는 새로운 Element를 생성한 후 root.render()에 전달해야 함

  • React에서 컴포넌트란 무엇인가?

: UI를 재사용이 가능한 조각으로 나눈 것
: React에서 Button, Form 등의 것들이 컴포넌트로 표현됨

  • React의 컴포넌트 종류에는 무엇이 있고, 각각 어떤 특징이 있는가?

: 함수 컴포넌트와 클래스 컴포넌트
: 함수 컴포넌트는 속성을 나타내는 데이터 props를 전달 받아서 React Element를 반환하는 것, 컴포넌트가 Javascript 함수의 형태인 것을 함수 컴포넌트라고 명명
: 클래스 컴포넌트는 props 대신 state를 바탕으로 지역 상태, 생명주기 메서드를 사용할 수 있음, 컴포넌트가 ES6 Class 문법의 형태인 것을 클래스 컴포넌트라고 명명

  • 컴포넌트는 React의 Element가 될 수 있는가?

: DOM 태그뿐만 아니라 컴포넌트로도 React Element를 나타낼 수 있으므로 Element가 될 수 있음

  • 컴포넌트끼리 어떻게 합성할 수 있는가?

: 컴포넌트의 반환 값에 다른 컴포넌트를 참조하여 반환하는 방식으로 합성할 수 있음

profile
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔

0개의 댓글