리액트란 무엇이며, 왜 쓰는 것일까?
프론트페이지를 쌩자바스크립트로 만들라고 하면, 코드가 너무 길어지고, 복잡해지는 단점이 있다. 이러한 단점을 보완해주기 위한 자바스크립트 라이브러리에는 React, Vue, Svelte, SolidJS 등이 있는데, 이 중, 리액트가 가장 레퍼런스가 많고, 유저가 많다는 특징이 있다.
SPA란?
SPA란 Single Page Application의 줄임말로, 다음과 같은 특징을 가진다.
1.html 파일을 1개만 쓰고
2.다른 페이지를 보여주고 싶을 때, html 부분만 갈아치워서 보여주는 방식을 사용한다.
3.위와 같은 특징들 때문에 웹페이지가 부드럽게 동작한다.
JSX란?
원래 리액트환경에서 div 태그를 하나 만들고 싶으면 자바스크립트로
React.createElement('div', null);이런 식으로 어렵게 코드짜야 한다. 이는 굉장히 불편한 방식이기 때문에 JSX라는 언어를 대신 사용한다. JSX는 일종의 자바스크립트 언어이지만 사용하는 문법이 자바스크립트와 조금씩 다른 부분이 있다.
1.자바스크립트에서 class를 지정해주고 싶으면 class="" 키워드를 사용하면 되지만,
JSX에서 클래스를 지정하고 싶다면 className="클래스이름" 형식 을 사용해야 한다.
2.html에 자바스크립트 변수를 꽂아넣고 싶을때는 중괄호({})를 사용하면 된다.
예시)
function App(){
let post = '강남 우동 맛집';
var data = 'red;;
return (
<div className="App">
<div className="black-nav">
<div>블로그임</div>
<div className={data}>{ post }</div>
</div>
</div>
)
}위와 같이 div 태그에 post 변수 안의 값인 '강남 우동 맛집'을 쓰고 싶다면 중괄호 안에 변수값을 넣어주면 된다. 또한 위 코드처럼 className에도 중괄호를 사용하여 클래스 이름을 변수 이름으로 집어넣을 수도 있따.
이처럼 변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩이라고 한다.
3.html에 style 속성 넣기
기존 html에 style 속성을 넣으려면<div style="color : blue">다음과 같이 스타일 지정을 해줘야 하지만 JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야한다.
- 스타일 속성을 { 속성명 : '속성값' } 이렇게 넣으면 된다.
- 근데 font-size 처럼 속성명에 대쉬기호를 쓸 수 없다.
- JSX에서 대쉬기호(-)는 뺄셈으로 인식되기에 대쉬기호 대신 모든 단어를 붙여써야 한다. 붙여쓸 땐 앞글자를 대문자로 치환해야한다(CamelCase).
예시)<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>
출처 : 코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"
