React
리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
그러면 프론트엔드에 기초를 배울때 했던 HTML/CSS와 대체 뭐가 다른 것인지 인지해야한다.
React는 화면구성에 있어서 컴포넌트 단위로 만들기 위한 컴포넌트 라이브러리 라고 할 수 있다. 다른 특별한 템플릿 언어가 아닌 JavaScript를 이용해서 만든다.
다시 말해서 기능을 넣은 특정한 UI 부분을 따로 구성하고 모듈화 시켰다고 볼 수 있다. 이러한 독립적인 모듈 하나 하나를 컴포넌트라고 지칭하고 개발자가 컴포넌트 요소 하나하나를 조립해서 전체적인 UI를 구현하는 것이 리액트의 방향이다.
그러면 React의 장점은 무엇일까 ?
1. 재사용성, 유지보수성에서 뛰어남
- UI를 독립적인 컴포넌트 단위로 쪼개서 개발이 가능
- 버튼, 모달, 카드 같은 UI 요소를 한 번 만들어두면 여러 곳에서 활용이 가능함
2. Virtual Dom을 통한 성능 최적화
- 리액트는 직접 DOM을 조작하지 않고 Virtual Dom을 사용
- 변경된 부분에 대해서만 효율적으로 업데이트 하므로, 불필요한 렌더링을 최소화 할 수 있음(비동기 처리) -> 빠른 UI 반응 속도
3. 단방향 데이터 흐름 (One-way Data Binding)
- 데이터가 부모에서 자식으로 흐르는 방향으로 데이터 추적이 쉬워지고, 버그를 줄일 수 있음
- 예측 가능한 구조 덕분에 대규모 프로젝트에서도 관리가 용이
4. JSX 문법
- HTML과 JavaScript를 하나의 파일에서 직관적으로 작성 가능
- UI 구조를 코드에서 쉽게 표현 가능
위에 장점에서 다른 2번째 Virtual DOM 사용에 대한 장점 요소가 처음 리액트를 접했을 때, 쉽게 와닿지 않을 것이다.
리액트에서는 화면 변화에 있어서 비동기처리를 위해서는 state에 대해서 알아야 한다.
State에 대해서 알아보자,
화면 변화 요소를 다루기 위해서는 state를 필요로 하는데 useState() 메서드를 통해서 불러올 수 있다. 파라미터로 state에 대한 초기값 value를 설정할 수 있다. 메서드의 반환으로 배열타입의 2개의 데이터를 반환하는데 변수 state와 메서드 setState()를 반환하게 된다.
state에 대해서 직접 값을 변경하는 것은 의미가 없다. 왜냐하면 화면 렌더링이 되어야지 return에 존재하는 화면 출력이 바뀌는데 단순히 state에 대해서 값을 변경함에 있어서 렌더링이 일어나지 않는다.
렌더링을 시키기 위해서는 2번쨰 파라미터로 받은 setState() 메서드를 사용하게되면 된다. setState() 메서드에 파라미터로 값을 지정하면 state 값이 변하게 되고, 변화되는 즉시 state를 생성하는데 사용했던 useState() 메서드가 존재하는 컴포넌트 전체가
비동기 렌더링이 진행되면서 화면 깜빡임 없이 즉각적으로 화면 렌더링이 일어난다.