🎯 참고 사이트
📌 JSX
기존
HTML, CSS, JS를 분리된 파일로 관리하였다.
현재
동적으로 내용을 결정하는 경우가 많아지며 JS가 HTML을 담당하게 되었다.
(이것이 React 컴포넌트에서 렌더링 로직과 마크업이 같은 위치에 있게 된 이유이다.)
❗️ JSX와 React는 서로 다른 별개의 개념이다.
JSX는 확장된 문법이고, React는 JS 라이브러리이므로, 독립적으로 사용할 수도 있다.
JSX의 규칙
- 하나의 루트 엘리먼트로 반환하기
여러 엘리먼트를 반환하려면 하나의 부모 태그로 감싸줘야 한다.
➡️ 마크업에<div>추가하지 않으려면Fragment인<></>로 대체할 수 있다!
👀 그렇다면 왜 JSX 태그를 하나로 감싸줘야 할까?
JSX는 HTML처럼 보이지만 내부적으로는 일반 JS 객체로 변환되므로, 하나의 함수에서 두개의 객체를 반환할 수 없다.
function sum (sum1, sum2) {
return sum1, sum2; // JS에서는 하나의 함수에서 두개의 리턴값 반환 안됨
}💡
Fragment
브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화 해준다.
- 모든 태그 닫아주기
<img>➡️<img /><li>➡️<li></li>
- 카멜 케이스 이용
class➡️className(class는 예약어)stroke-width➡️strokeWidth
📌 JSX 안에서 자바스크립트 사용하기
중괄호를 사용하는 곳
JSX에서 변수, 함수 등 자바스크립트를 사용하는 곳에 { } 를 사용한다.
- JSX 태그 안의 문자 -
<h1>{name}'s To Do List</h1> =바로 뒤에 오는 어트리뷰트 -src = {avatar}
이중 중괄호 - CSS / 객체
-
객체
JSX에는 문자열, 숫자, 표현식 뿐만 아니라 객체를 전달할 수도 있다.
객체는{ name: 'kim', age: 20 }처럼 중괄호로 표시되므로, JSX에서 객체를 전달하려면 중괄호로 한번 더 객체를 감싸야 한다.
➡️{{ name: 'kim', age: 20 }} -
CSS
JSX의 인라인 CSS 스타일에서도 볼 수 있다.
참고로 React에서는 인라인 스타일을 사용할 필요가 없지만 그래도 필요한 경우!style어트리뷰트에 객체를 전달해야 한다.
<ul style={
{
backgroundColor: 'black',
color: 'pink'
}
}>❗️ 인라인
style프로퍼티는 카멜 케이스로 작성된다.
{{ background-color: "black" }} ➡️ {{ backgroundColor: 'black' }}
📌 props
📌 이벤트에 응답하기
이벤트 핸들러 함수의 특징
- 주로 컴포넌트 내부에서 정의
handle로 시작하고 그 뒤에 이벤트명을 붙인 함수명을 가진다.
ex)onClick={handleClick},onMouseEnter={handleMouseEnter}
📌 useState
컴포넌트에서 보여줘야하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있을까?
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState는 리액트의 Hooks 중 하나이다.
📌 input 상태 관리
📌 useRef
JS를 사용할 때, 우리는 특정 DOM 을 선택해야 하는 상황에 getElmentById 와 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.
리액트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생한다.
(ex: 특정 엘리먼트 크기 / 스크롤바 위치 설정 / 포커스)
ref
이럴 때 사용하는 것이 ref이다.
함수형 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수를 사용한다.
useRef()
useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 한다. 그러면 Ref 객체의 .current 값은 우리가 원하는 DOM을 가르키게 된다.
