React를 쓰는 이유는 무엇일까.
간단하게 말하자면 React는 JavaScript를 이용해서 HTML이 로드되었을 때 사전에 DOM을 control하는 기술이다.
1. JSX(JavaScript XML)
JSX는 React에서 컴포넌트의 생김새를 정의할 때 사용하는 JavaScript 확장 문법이라고 한다. HTML 같아 보이지만 HTML이 아니라 JSX 문법으로 작성된 'JavaScript'이다.
React를 쓰기 위해 무조건 JSX를 사용해야 하는 것은 아니지만 복잡한 요소들을 쉽게 가공할 수 있는 큰 장점이 있기 때문에 필수로 사용하게 된다.
JSX 문법을 사용한 XML 형태의 코드가 Babel을 통해 JavaScript로 변환된다.
// XML 코드
<div> </div>
// 변환된 JavaScript 코드
const $div = document.createElement('div');※ JSX → JavaScript 문법으로 변환하기 위해 지켜야 할 규칙
- 리액트에서는 항상 태그를 닫는다. (<input/ >, <br/ >)
- 두 개 이상의 태그는 태그들을 감싸주는 하나의 태그를 생성한다. (fragment 문법 <>, </>로 감싸주는 것도 가능)
- return문에서 열고 닫는 소괄호 생략이 가능하다.
- 변수나 state를 생성해 사용할 때는 중괄호로 감싸준다.
- 태그에 스타일을 적용할 때는 className을 사용해 클래스를 지정한다. (< div className="클래스명">< /div>)
✨React를 사용하는 가장 큰 장점 중의 하나!
리액트에서는 데이터 바인딩이 쉽게 되기 때문에 生HTML 대신 JSX를 쓴다.
위와 같은 이유로 React 외에 Vue, Angular와 같은 데이터 바인딩을 쉽게 도와주는 라이브러리를 사용하는 것이다.
예를 들어, 전통적인 자바스크립트 데이터 바인딩하는 'document.getElementById().innerHTML = '';' 코드를 리액트에서는 작성하지 않아도 된다.
JSX 문법을 사용하면 매우 쉽고 간편하게 HTML을 동적으로 바꾸고 데이터 바인딩을 할 수 있다!👍
리액트에서 데이터 바인딩하는 방법
중괄호({ }) 안에 변수를 집어넣어 다양하게 사용할 수 있어 매우 유용하다.
주석을 작성할 때도 중괄호 안에 사용해야 하고, 중괄호가 없으면 문자열 그대로 렌더링된다.
✅이미지를 import 할 때 사용하는 src, id, href 등의 속성에도 사용할 수 있다.
✅style 속성을 집어넣을 때도 중괄호를 이용해 'object' 형식으로 넣는다.
보통 object 자료형을 만들 때 오른쪽에는 text 또는 숫자가 들어가고, 왼쪽에는 css 스타일 속성이 들어간다.
(참고) React에서 font-size(❌), fontSize(⭕)
스타일 속성을 작성할 때 '-'는 뺄셈 연산으로 인식하기 때문에 'camelCase'표기법으로 작성해야 한다.
// { (자바스크립트 코드) 변수명 또는 함수 }
<h2> { 변수 } </h2>
<h3> { 함수() } </h3>
// { 변수명, 함수 }
import logo from './logo.svg';
<img src={ logo } />
// style={ object 자료형으로 만든 스타일 }
<div style={ { color : 'blue', fontSize : '16px' } }> // 예시
개발 블로그
</div>
<div style="font-size: 16px"> // 잘못된 예시
개발 블로그
</div>2. state 설정
웹사이트에 필요한 데이터를 저장하는 방법에는 일반적으로 변수에 저장하거나
리액트의 데이터 저장공간인 state 만드는 방법이 있다.
state를 만드는 방법
- { useState }를 코드 상단에 첨부
리액트 안에 있는 내장함수(useState())를 사용하기 위해 import 한다.
import React, { useState } from 'react';- useState(데이터)
// 예시
useState('비오는날 노래 추천');코드 안에 이와 같이 작성하여 데이터 저장공간을 생성한다.
그런데 useState에 데이터 2개가 들어간 Array를 발견할 수 있다.
Array 내부를 살펴보면,
[a, b] === [state 데이터, state 데이터 변경 함수];
(참고) ES6 JavaScript 최신문법 'destructuring(구조 분해)'
Array, Object에 있는 자료를 변수에 쉽게 담고 싶을 때 사용한다.
아래의 형식을 지켜 state를 작성해야하므로 꼭 외우자!✨
// 예시
let [블로그제목, 블로그제목변경] = useState('동네 맛집 추천');
// state 사용(중괄호 사용!)
<h2> { 블로그제목 } </h2>웹 앱(Web App)을 만드는 가장 중요한 원칙
웹이 앱처럼 동작하게 만들고 싶다면 중요한 정보는 모두 state에 저장해야 한다.
만약 state에 저장한 데이터가 변경되면, HTML이 새로고침하지 않고도 자동으로 재렌더링되어 반영된다.
(변수에 저장한 데이터가 변경되어도 자동으로 재렌더링되지 않아서 새로고침해야 한다)
그러므로 데이터 수정이나 정렬이 이루어져 자주 바뀌는 중요한 데이터는 변수에 저장하지 말고 state로 저장해서 사용하는 것이 좋다.
사이트 제목 같이 자주 바뀌지 않는 데이터는 변수로 저장해도 된다.
3. onClick(이벤트 리스너)
요소(ex. button)에 이벤트 리스너(핸들러)를 장착하는 방법
1. 실행할 함수를 따로 생성하여 함수명을 호출
2. 이벤트 리스너 함수에 실행할 코드를 바로 작성
// 별도의 함수를 생성할 때
onClick={ 클릭될 때 실행할 함수 }
// 일반 표현식 작성 불가
onClick{ a + b }
// 함수 생성하지 않고, 이벤트 리스너에 바로 작성할 때
onClick{ ()=>{ 실행 코드 } }
// 일반 표현식 작성 가능
onClick{ ()=>{ a + b } }(참고) ES6 문법 이후로 함수를 생성할 때, function이라는 키워드를 작성해서 생성하는 방법보다 화살표 함수(arrow function)를 사용한다.
(그러나, 위의 두 가지 방법 내부 동작은 완전히 동일하다고 볼 수는 없다고 한다.)
4. state 변경
// [a, b] === [state 데이터, state 데이터 변경 함수];
let [블로그제목, 블로그제목변경] = useState('동네 맛집 추천');state를 변경하려면 state를 만들었을 때 작성한 state 변경 함수를 사용해야 한다.
예를 들어, 함수 이름이 '변경함수'일 때, 변경함수(대체할 데이터) 라고 작성하면 초기값에서 대체할 데이터 값으로 변경된다.
state 변경함수로 변경하면 재렌더링이 잘 일어나고,
변경함수(변경할 데이터); 라고만 작성하면 재렌더링이 일어나지 않을 수 있다.
5. Component
Component는 React를 쓰는 중요한 이유 중 하나라고 볼 수 있는데 HTML을 '한 단어'로 축약할 수 있다.
컴포넌트 안에 컴포넌트가 있을 수 있는데 Component로 만들어 놓음으로써 (HTML 통째로) 관리가 편해지는 장점이 있다.
그러나 Componet가 많을수록 좋은 것이 아니므로 꼭 필요한 경우에만 Component로 만드는 것을 추천한다.
Component를 많이 만들면 state를 쓸 때 복잡해지는 단점이 있다.
'function App()'인 상위 Component에서 만든 state를 쓰려면 props 문법을 이용해야 한다.
그렇다면 Component로 만드는 기준은 무엇일까?
어떤 것을 Component로 만들 것인가 의문이 들 수 있다.
아래와 같은 경우에 Component로 만드는 것을 추천한다.
- (틀은 동일하고 내부 내용만 달라지는) 반복적인 HTML 코드
- 사이트에서 자주 변경되는 HTML UI들
(재렌더링이 많이 일어나는 UI를 Component로 만들면 UI 부분만 재렌더링 되므로 전체적인 성능이 좋아짐) - 다른 페이지를 만들 때
*참고 사이트: 리액트 기초_블로그 프로젝트 만들기
지금까지 리액트의 기본적인 구조를 파악하고 기본 문법을 익혀보았다.
자바스크립트와 매우 유사하다고 느꼈고, 자바스크립트에 대한 선행 학습이 있어야 쉽게 이해하고 재밌다고 느낄 수 있을 것 같다.
강사님의 이해가 쏙쏙되는 강의 덕분에 첫인상은 😊! 앞으로 심화 학습을 통해 리액트와 친해져보자. Everything's gonna be fine;)
