React 맛보기

React란 자바스크립트 라이브러리중 하나로 웹 프레임워크중 하나이다.

 

React의 특징

 

1. 선언형 : HTML/CSS/Javascript 로 나눠서 적는거 보다 JSX를 활용한 선언형 프로그래밍 

2. 컴포넌트 기반 (Component-Based) : 요소별로 개발하여 분리하여도 독립적으로 사용이 가능하므로,

기능에 집중하여 개발이 가능하다.

3.  범용성 : 자바스크립트 기반이므로 자바스크립트 프로젝트 어디에든 유연하게 적용이 가능하다.

 

 

 

JSX

 

먼저 위에서 말한 JSX가 무엇인지 알아야 할 필요가 있는데

JSX는 자바스크립트 XML의 줄임말이고 HTML도 아니고 문자열로 취급하지도 않는다.

간단하게 자바스크립트의 확장 문법이라고 생각하면 된다.

 

JSX는 확장 문법이지만 "Babel" 이라는 자바스크립트 컴파일러를 이용하여 화면에 렌더링 해준다.

엄청 복잡할 것 같지만 React에서는 JSX문법만을 가지고 웹 어플리케이션을 개발할 수 있다.

 

 

JSX 유의사항

 

- 엘리먼트를 여러개 작성하려고 하면 가장 위에서 오프닝 태그와 클로징 태그를 사용해서 감싸줘야된다.

 

<div>
  <h1>하윙</h1>
</div>
<div>
  <h2>오랜만</h2>
</div>

HTML 문법에서는 문제 없지만 JSX에서는 다음과 같이 사용해야 한다.

 

<div>
  <div>
    <h1>하윙</h1>
  </div>
  <div>
    <h2>오랜만</h2>
  </div>
</div>

 

- class속성을 사용하려면 "className"으로 표기해야한다.

 

X
<div class = "hi"> hi </div>

O
<div className = "hi"> hi </div>

 

 

- Javascript를 사용하려면 무조건 중괄호를 사용한다.

function App() {
	const shape = "Triangle";
    
    return (
    	<div>
          My shape is {shape}
        </div>
    );
}

 

추가로 React 엘리먼트를 JSX로 작성한다면 대문자로 시작해야한다. ex) return <hello />  -->  <Hello />

소문자로 시작하면 HTML로 엘리먼트로 인식한다고 한다. ㅎ

 

 

- 조건부는 삼항연산자를 사용한다.

<div>
  {
    (15 % 2 === 0) ? (<p>15가 2의 약수</p>) : (<p>15는 2의 약수x</p>)
  }
</div>

 

오늘 후기

 

리액트 처음 맛봤는데 생각보다 맛있다. 

컴포넌트 만져보는 것도 재밌고 결과가 나오는 것도 신기하고 데이터를 전에 배운 map()로 만지는 것도 흐뭇했다ㅋㅋㅋ

내일은 공부하고 오랜만에 군대 동기들 만나야되니까 일찍 자야겠당 ㅇㅂㅇ