React란
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
- Component
React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현
- Virtual DOM(Document Object Model)
가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념
- JSX
JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML과 유사
🌀 왜 리액트를 사용하는 이유
1. 생산성/재사용성
Component와 Hook을 활용하면 작은 단위의, 독립적인 요소로 개발이 가능하다.
이로 인해 개발자의 생산성과 코드의 재사용성을 높인다.
1-1. 기존 HTML/JS
<body>
<span id="text"></span>
<script>
document.getElementById("text").innerHTML = "Hello Js";
</script>
</body>레이아웃을 구성하는 HTML과 UI 내 데이터를 변경하는 JavaScript 로직이 분리되어 있어 코드 파악에 오랜 시간이 걸릴 수 있다.
1-2. React
const App = () => {
const text="Hello React";
return <span>{text}</span>
}JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어 개발이 간단해지고 다른 사람이 개발 의도를 파악하기 쉬워진다.
2. 풍부한 자료/라이브러리
현재 React는 전 세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있다.
3. 다양한 사용처
단순한 웹 애플리케이션 뿐만 아니라 한 번 배운 React 지식을 React-Native에 적용하여 안드로이드 애플리케이션 및 iOS 애플리케이션 등을 개발할 수 있다.
단, React는 대규모 프로젝트에서 데이터를 효율적으로 관리하는데 유용하지만 실행속도 면에서는 다소 불리하다.
🌀 리액트의 특징
1. JS와 HTML을 혼합해서 사용할 수 있다.
1-1. 기존 JS
$('#todo-list').append( '
<li>
<span>' + value + "</span><button type="button" class="complete">완료</button>
<button type="button" class="remove">삭제</button>
</li>
" )1-2. React
<ol id="todo-list">
{todoList.mao((item,index)=>(
<li key="{item.id} className=
{item.inCompleted ? 'completed':''}>
<span>{item.value}</span>
...
</li>
))}
</ol>2. 컴포넌트
const App = () => {
const text="Hello React";
return <span>{text}</span>
} 이러한 형태로 하나의 블록을 만들어서 핗요한 곳에 조립하여 개발을 한다.
이것을 컴포넌트라고 부른다.
3. State
const [todoList, setTodoList] = useState([])
const [inputValue, setInputValue] = useState('')컴포넌트 내에서 'State'를 이용하여 데이터를 유동적으로 관리한다.
'State'가 변경될 때마다 컴포넌트가 다시 렌더링(Rendering)된다.
