React Intro
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
- JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
- React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
create-react-app으로 간단한 개발용 React 앱을 만들 수 있다.
리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 입니다.
1. 리액트 특징
선언형: 선언형 프로그램이란 무엇(What)에 집중하여 프로그래밍을 하는 것입니다.
즉, 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다.
반대로 명령형 프로그램이란 어떻게(How)에 집중하여 프로그래밍을 하는 것입니다.컴포넌트 기반: 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있고 유닛 테스트 및 유지 보수가 가능합니다.범용성: 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다.
2. JSX (JavaScript XML)
JSX는 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법 입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다.
하지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 Babel을 통해 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일(변환)합니다. 컴파일 후 JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.
또한 React에서는 DOM(HTML, CSS, JavaScript)과 다르게 React DOM(CSS, JSX) 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다.
즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄었고, 한 눈에 컴포넌트를 확인할 수 있게 되었습니다.
즉, JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 됩니다.
2-1. 왜 JSX를 써야할까?
DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요합니다. Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있습니다.
하지만 React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성할 수 있습니다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있습니다. 이렇게 기능과 구조에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.
JSX를 쓰지 않아도 React를 사용할 수 있지만 문법적으로 가독성이 떨어지고 코드가 복잡해지는 단점이 있습니다.
2-2.JSX 문법
- JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다. 즉, 하나의 엘리먼트 안에 모든 엘리먼트가 포함됩니다.
<div>
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>- React에서 CSS class 속성을 지정하려면
className으로 표기해야합니다. 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야합니다.
<div className="greeting">Hello!</div>- JSX에서 JavaScript를 쓰고자 한다면, 꼭
중괄호({})를 이용해야 합니다. 중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.
function App() {
const name = 'Han Sunguk';
return (
<div>
Hello, {name}
</div>
)
}- React 엘리먼트가 JSX로 작성되면
대문자로 시작해야합니다(PascalCase). 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 됩니다.
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다.
function Hello(){
return <div>Hello!</div>;
}
function HelloWorld(){
return <Hello />
}- 조건부 렌더링에는 if문이 아닌 삼항연산자를 이용해야합니다.
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>- React에서 여러 개의 HTML 엘리먼트를 표시할 때는
map()함수를 사용합니다.
map 함수를 사용할 때는 반드시key JSX 속성을 넣어야 합니다.key 속성의 위치는map함수 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣으면 됩니다.
key JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome React'},
{id: 2, title: 'installation', content: 'You can do it'}
];
function Blog(){
const content = posts.map((post)=>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
):
return (
<div>
{content}
</div>
);
}위 예제의 map 함수 의사코드는 아래와 같습니다.
배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map)합니다.
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome React'},
{id: 2, title: 'installation', content: 'You can do it'}
];
function Blog(){
const postToElement = (post) => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
const blogs = post.map(postToElement);
return <div className = "post-wrapper"> {blogs}</div>return 문 안에서 map 함수를 사용할 수도 있습니다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 함수의 결과를 return 문 안에 인라인으로 처리할 수 있습니다.
3. 컴포넌트
하나의 기능 구현을 위해 구조와 동작에 대한 코드셋을 컴포넌트라고 합니다. 또한 UI를 구성하는 필수 요소 등 컴포넌트에 대한 다양한 정의가 있습니다.
-
리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있습니다.
-
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로 근원(root)이 되는 역할을 합니다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있습니다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있습니다.
-
컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장합니다. 그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동합니다. 예를 들어, 원하는 수정 사항에 맞추어 컴포넌트의 위치만 수정해 주거나 재사용할 수 있습니다.
