사실 나는 프론트쪽에 대해서 잘 아는 게 없다.
어쩌다가 바닐라 자바스크립트나 jsp에 박혀있는 jstl 정도를 만지는 게 전부였는데 요즘은 풀스텍에 대한 요구가 많아진 것 같아 이에 대해서 공부해보려고 한다.
그렇다면 왜 리액트를 골랐을까?
- 일단은 리액트를 실제로 많이 쓴다는 것에서 처음 흥미를 느꼈다.
- 컴포넌트 기반 개발로 코드 재사용성에 있어서 흥미를 느꼈기 때문이고
- 가장 좋았던 점은 자료가 많이 쌓여, 여러 문제에 부딪혔을 때, 든든한 서포트가 되줄 것들이 많다고 생각했다.
리액트가 만들어진 이유?
기존에는 단순히 서버 사이드 렌더링만 하고 있었다.
하지만 요즘은 그렇게 작동하는 페이지를 잘 쓰지 않으려고 하고 있음
그러다보니 더 기능적으로 많은 것들을 충족 시키기 위해 자바스크립트를 사용하게 되었고, 그러기 때문에코드를 유지보수 하는데에 더 많은 자원과 복잡성이 증가함
그렇기 때문에 이런 문제를 해결하기 위해 리엑트가 개발됨
리액트의 특징
- 리액트는 오픈소스 자바스크립트 라이브러리임 -> 즉 프레임워크가 아님
- 컴포넌트 베이스이다. 그리고 이러한 컴포넌트의 조합으로 사용된다.
- 애플리케이션의 레이어를 이용해 뷰를 핸들링함.
- 리액트를 사용하면 웹페이지를 새로고침하지 않고 업데이트를 할 수 있음
- JSX를 사용함
- 추후 리액트 네이티브를 이용해 안드로이드나 ios 개발에도 사용할 수 있다
리액트의 가장 큰 장점은 새로고침 없이 페이지를 부분적으로 업데이트 할 수 있음!!
리액트의 개념
컴포넌트 기반 구조
- 리액트는 UI를 컴포넌트(Component)라는 작은 단위로 나누어 개발
- 컴포넌트는 독립적으로 작동하면서 동시에 유지보수 및 개발 생산성 향상에 도움이 됨
JSX(Javascript XML) 사용
function HelloWorld() {
return <p>Hello, World!</p>;
}
html 요소를 html 파일에 직접 작성하지 않고, JSX 파일을 통해 html 블럭(?)을 작성하는 것 같다.
이러한 요소들로 페이지의 각 부분을 담당한다.
가상 DOM (Virtual DOM)
위의 코드처럼 정적인 DOM이 아니라 가상 DOM을 사용해 DOM을 부분적으로 업데이트하고 수정할 수 있다.
상태(state)와 속성(props)
상태랑 속성의 차이가 크게 와닿지는 않는데 다시 보자면 이런 차이가 있다고 한다.
상태(state)란: 컴포넌트 내부에서 관리되는 변경 가능한 데이터 라고 한다.
import { useState } from "react";
function ClickCounter() {
// count라는 state를 선언, 초기값은 0
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
클릭 수: {count}
</button>
);
}
특징은 다음과 같다.
- 컴포넌트 내부에서만 관리됨
- 값이 변경되면 컴포넌트가 다시 렌더링 됨.
위의 코드에 경우, useState를 사용해 count라는 상태 변수를 생성하고, setCount는 이 상태변수 값을 바꿀 때 사용된다.
속성(props)란: 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이라고 한다.
특징은 다음과 같다.
function Print(props) {
return <h1>Print: {props.name}님!</h1>;
}
function App() {
return <Print name="Hello, World!" />;
}
- 부모 컴포넌트 -> 자식 컴포넌트로 값을 전달
- 자식 컴포넌트에서는 값에 대한 변경이 허락되지 않음
- 이로 인한 재사용성이 향상됨!
위의 코드 블럭을 보면, 부모 컴포넌트 App이 자식 컴포넌트 Print를 호출해 값을 전달해준다.
나머지 기본적인 특징은 계속 개발과 공부를 병행하면서 할 생각이다.
