React란?
-
리액트 : 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리.
-
리액트의 3가지 특징: 선언형, 컴포넌트 기반, 범용성 (다양한 곳에서 활용 가능)
- 선언형(Declarative) : 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향.
- 컴포넌트 기반(Component-Based) : 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발 가능.
- 컴포넌트간의 의존성 X => 독립성
- 필요한 컴포넌트 사용가능 => 재사용성
- 기능 작동에 집중하여 개발 => 작동되지 않는 컴포넌트 위주로 유지보수, 유닛 테스트에 편하다.
- 범용성(Learn Once, Write Anywhere) : 리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용 가능. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능.
React Intro
JSX
- JSX : React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다. JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아님. “Babel”을 통해 브라우저가 이해할 수 있는 JavaScript 코드로 변환
- 마크업과 로직을 분리하지 않고 UI만들 수 있다.
- JSX는 JavaScript를 확장한 문법으로 주로 React 컴포넌트를 작성할 때 사용하는 문법
- JSX를 쓰지 않아도 React를 사용가능하나, 문법적으로 가독성이 떨어지고 코드가 복잡해짐
- React에서는 DOM을 사용하는 것을 지양
- JSX는 JavaScript를 확장한 문법이기 때문에 JavaScript 기본 문법을 활용가능하며, JavaScript 기본 문법을 활용하려면, JSX 내부에서 중괄호({}) 내에 JavaScript 표현식을 작성한다.
- Babel : JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링 가능.
- JSX는 Babel을 통해 JavaScript로 변환
DOM 과 React JSX 비교
- React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발 가능.
- 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인 가능.
- JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것!!!
- 주의할 점은 JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요
왜 JSX 써야할까?
- DOM - Javascript, HTML
- React - JSX
- DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요. 하지만 React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성 가능. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 가능.(한눈에 볼 수 있는 기능과 디자인)
- 컴포넌트 : 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋
- JSX 없이는 React 요소를 만들 수 없는 걸까?
: JSX 없이도 React 요소를 만들 수 있다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점
JSX 활용
주요 JSX 문법
- JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주기.
- React에서 CSS class 속성을 지정하려면 "className"으로 표기
: 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의
- JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용
: 중괄호를 사용하지 않으면 일반 텍스트로 인식
- React 엘리먼트가 JSX로 작성되면 "대문자"로 시작 : 컴포넌트
: 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 '컴포넌트'라고 함.
- 조건부 렌더링은 if문이 아닌 삼항연산자를 이용
- 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용
: map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다. key는 데이터가 가지는 고유한 id 값(식별자)을 활용. 변하지 않고, 예상 가능하며, 유일한 ID가 없으면 항목의 인덱스를 key로 사용. 인덱스를 활용은 최후의 수단(as a last resort).
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시 됨.
- key 속성 값이 반드시 id가 되어야 하나요? id가 존재하지 않으면 어떻게 해야 하나요?
: 리액트 공식문서 참고
: Math.random() 등으로 무작위로 생성된 값을 key로 지정하게 되면, 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있습니다. 더 자세한 내용에 대해서는 (공식문서)를 참고.
- JSX 활용법 실습
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React" },
{ id: 2, title: "Installation", content: "You can install React from npm" }
];
export default function App() {
// ["Hello World", "Installation"];
// TODO : JSX 활용 슬라이드를 참고해서, 에러를 해결하고 여러 개의 엘리먼트를 표시해보세요.
// 1. 한 포스트의 정보를 담은 객체가 있습니다.
// 2. 이 객체를 JSX 표현식으로 바꿔줍니다.
const postToJSX = posts.map((obj) =>
<div key={obj.id}>
<h3>{obj.title}</h3>
<p>{obj.content}</p>
</div>
);
// 포스트를 JSX로 변경해주는 함수
// 3. 포스트를 JSX로 변경하여 리턴합니다.
return (
<div className="App">
<h1>Hello JSX</h1>
{postToJSX}
</div>
);
}
map을 이용한 반복 Hands-on
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
const postMsg = posts.map((el) => (
<div key={el.id}>
<h3>{el.title}</h3>
<p>{el.content}</p>
</div>
));
return (
<div>
{postMsg}
</div>
);
}
Component
- 정의 : 하나의 기능을 구현을 위한 여러 종류의 코드 묶음. UI를 구성하는 필수 요소.
- 컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다.
- 컴포넌트 단위로 코드를 작성하게 되면, 컴포넌트 간 의존성이 낮아지기 때문에 독립적으로 작동. 서로에게 의존성이 없으므로 원하는 수정사항에 맞추어 컴포넌트의 위치만 수정해주거나, 재사용 가능.
- 컴포넌트는 재사용 가능하여 효율적인 개발이 가능
- 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발
- 마크업, 디자인, 로직을 긴밀하게 연결하여 개발을 할 수 있다. (loosely coupled)
- 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할. 모든 컴포넌트 위에는 최상위 컴포넌트가 존재.
- 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있습니다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화. 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다.
: 근원이 되는 1) root 컴포넌트-> 2) 헤더, 2)콘텐츠 리스트
-> 2) 헤더 -> 3) 서치, 3)세팅 같은 자식 컴포넌트
-> 2) 콘텐츠 리스트 -> 3) 각각의 영상 콘텐츠들을 자식 컴포넌트
트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당. 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로는 복잡한 애플리케이션이 됨.
컴포넌트 기반 개발의 장점
- 예시 ) 헤더를 사이드로 옮길때
- HTML, CSS, JavaScrip : HTML을 수정하여 구조를 바꾸기 -> 화면의 상단에 맞추어 작성되어있던 CSS 스타일 속성을 화면 왼쪽에 맞게 수정 -> 변경된 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작.
- React : 때문에 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정
Quiz - React Intro
- 4번 ) 이상해보이지만, 배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식이기 때문에 맞는 보기이다.
const Hello = () => {
return (
[<div>안녕하세요</div>,<div>반갑습니다.</div>]
)
}- 8번 ) JavaScript HTML Python 출력하기 위해 작성한 코드로 틀린 것은 ?
let langs = ["JavaScript", "HTML", "Python"];
let viewLangs = () => {
return langs.map((it) => {
return <p>{it}</p>;
});
};
return (
<div>
{viewLangs}
</div>
);: viewLangs 가 화살표 함수 표현식으로 선언되어있기 때문에 함수를 호출하는 연산자 () 를 써야 작동합니다. {viewLangs()}
프론트엔드 개발자