라이브러리란 무엇인가?(vs 프레임워크)
라이브러리와 프레임워크 모두 이미 작성된 코드이며, 우리는 이를 가져다 사용하는 것이다. 왜? 만약 우리가 원하는 기능을 누군가가 이미 구현해 놓았다면, 굳이 우리가 새로 만들 필요 없이 이미 만들어진 코드를 사용하는게 효율적이니까("바퀴를 다시 발명하지 마라")
일반적으로 우리가 코드를 제어하느냐 아니면 정해진 규칙을 따라야 하는냐에 따라 라이브러리와 프레임워크가 나뉜다. 라이브러리는 우리가 제어할 수 있고, 필요한 부분에 라이브러리를 부르고 원한다면 쉽게 대체가 가능하다. 그러나 프레임워크는 프레임워크의 규칙을 따라야한다. 프레임워크는 어디에 템플릿을 넣어야 하는지, 컨트롤러를 넣어야 하는지를 알려준다. 즉, 어디에 코드를 넣어야 하는지 그 규칙을 알려준다. 우리는 프레임워크를 사용하면 코드를 제어하기보다는, 프레임워크의 규칙에 맞추고 있다고 느낀다.
다만 리액트의 경우 프레임워크인지 라이브러리인지에 대해서 많은 의견이 있다. 리액트를 사용하는데 있어서 별 중요하지는 않지만, 라이브러리와 프레임워크의 개념만은 기억해두자.
React
React란 무엇인가
리액트는 프론트엔드 개발을 위한 오픈소스 라이브러리이다.
React의 3가지 특징
- 선언형
- 컴포넌트 기반
- 범용성
선언형(Declarative, =명시적)
React는 페이지를 보여주기 위해 파일을 html,css,js로 나누지 않고 jsx을 활용해 하나의 파일에 명시적으로 작성한다. 이를 통해 필요한 파일의 수를 줄인다.
컴포넌트 기반
React는 하나의 기능 구현을 위해 여러 종류의 코드를 묶은 컴포넌트를 기반으로 개발한다. 독립성, 재사용성이 높아 기능 자체에 집중할 수 있다.
범용성
React는 Javascript 프로젝트의 어디서든 적용할 수 있다. 페이스북에서 만들어져 안정적이고 유명하며, 리액트 네이티브를 통해 모바일 앱 또한 만들 수 있다.
JSX에 대하여
JSX는 JavaScript XML의 줄임말로 Javascript를 확장한 문법이다. 이를 이용해 React Element를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 하는데 이때 “Babel”을 이용한다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일하고, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.
React에서는 CSS와 JSX문법만을 가지고 웹 페이지를 구현할 수 있다. 즉, 필요한 파일이 줄어들었고, 한 눈에 내용을 확인할 수 있게 된 것이다.
JSX를 써야하는 이유
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta Charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src= "src/index.js"></script>
</body>
</html>const greet = {
greeting: 'Hello',
toWorld: 'World'
};
function sayHelloToWorld(greet){
return greet.greeting + "" + greet.toWorld;
}
let heading = document.createElement("h1");
heading.textContent = `${sayHelloToWorld}`;
documnet.body.appendChild(heading);DOM에서는 html과 javascript를 연결하기 위한 작업이 필요하다. inline 방식이나 script태그를 이용해 연결할 수 있다. 이 때, 코드를 작성하면서 html의 구조를 머릿속으로 계속 그리고 있거나 html과 javascript파일을 오가며 참고해야한다.
반면, JSX문법을 활용해 위를 다시 작성하면 다음과 같다.
function App(){
const greet = {
greeting: 'Hello',
toWorld: 'World'
};
function sayHelloToWorld(greet){
return greet.greeting + "" + greet.toWorld;
}
return (
<>
<h1>
{sayHelloToWorld(greet)}!
</h1>
</>
)JSX를 이용하면 코드를 더 명시적으로 작성 가능하다. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.
JSX의 규칙
1.하나의 엘리먼트 안에 여러 엘리먼트를 포함시켜야 한다.
<div> // 최상위에서 감싸주는 태그
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>여러 엘리먼트를 작성하고 싶으면 최상위에서 감싸주는 태그가 있어햐 한다.
2.엘리먼트에 class를 지정하고 싶은경우, className으로 지정한다.
<div class= "greeting">Hello!</div> /* 이게 아니라 */
<div className = "greeting">Hello!</div> /* 이렇게 */만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의한다.
3.javaScript 표현식 사용 시, 중괄호 {} 이용한다.
function App() {
const name = 'Josh Perez';
return(
<div>
Hello,{name}! /* 만약 중괄호를 사용하지 않고 name으로 적으면 Hello, name!이 출력된다. */
</div>
);
}중괄호를 사용하지 않으면 일반 텍스트로 인식된다.
4.사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)
function Hello(){
return <div>Hello!</div>;
}
function HelloWorld() {
return <Hello />;
}React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다.
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.
5. 조건부 렌더링에는 if가 아닌 삼항연산자를 사용한다.
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>6. 여러개의 엘리먼트를 표시할 때, map() 함수를 이용한다.
const post = [
{id:nada1,title:test1,content:jsx1}
{id:nada2,title:test2,content:jsx2}
];
function Blog(){
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (<div>
{content}
</div>
);
}React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다. 이 때, 반드시 "key" JSX 속성을 넣어야 합니다. "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.
Create React App
Create React App은 React SPA(Single Page Application)을 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
npx create-react-app 폴더이름
로 실행할 수 있다. 위와 같은 코드를 터미널에 입력하면 새로운 React app을 설치하는데, 리액트를 실제로 브라우저 DOM에 렌더링 하는 것을 도와주는 react-dom을 비롯한 관련 패키지가 같이 설치된다. Happy hacking!이라는 메시지와 함께 설치가 완료된다. npm run start를 통해 localhost:3000에 해당 앱을 렌더링한다.
