리액트

[React.js] 리액트 useRef

useRef 함수는 리액트의 함수형 컴포넌트에서 사용하는 Hook의 한 종류로, 기본적으로 두 가지 기능을 가지고 있다. 1. 특정 DOM을 선택하여 저장 2. state와 관련없는 변수 저장 1. 특정 DOM을 선택하여 저장 특정 DOM 선택 기능은 보통 어떤 DOM element를 선택해 해당 element의 스크롤, 사이즈, 온 포커스 기능 등을 구현하기 위해 사용된다. import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); // input element를 ..

[React.js] 리액트 JSX

JSX란 리액트 컴포넌트에서 XML 형식의 값을 반환해주는 것을 의미한다. JSX의 동작 방식은, 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 Javascript로 변환해준다. Babel: 자바스크립트의 문법을 확장해주는 도구. 아직 지원되지 않은 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있도록 해준다. 1. 태그는 꼭 닫혀있어야 한다. => 태그가 있으면 반드시 태그가 존재할 것, 혹은 self closing 태그를 사용할 것. 2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다. => 반드시 하나의 태그에서 시작된 트리 구조가 될 수 있도록 할 것. ..