안녕하세요 반갑습니다
오늘은 React의 배경과 장점 특징 등에 대해서 알아보려고 합니다
React의 프로젝트를 바로 시작하기보다
react 프레임워크가 생성된 배경과 특징을 더 정확히 알고 있다면 활용하는데 훨씬 좋지 않을까 하고 준비했습니다
여러 개발자들이 함께 만들어낸 프레임워크라서 스토리도 나름 재밌는 거 같기도 하고요
따라서 이번 포스팅은 React의 시작과 배경 그리고 특징들에 대해서 작성을 해보려고 합니다
출처는 React 공식 홈페이지 및 웹서핑, 나무위키를 보고 참고해 보았습니다
제가 모르는 더 재밌는 이야기들이 숨겨져 있다면 댓글로 꼭 알려주세요
React의 배경
먼저 React의 탄생된 배경을 한번 알아보도록 하겠습니다
React는 여러분들도 잘 아는 애플리케이션이죠
Facebook 개발자진들이 만들었다고 합니다
역시 굉장히 큰 어플리케에션을 만든 사람들은 대단해요..ㅎㅎ
그런데 이미 사이트 개발 언어들이 있고 javascript를 이용해도 충분히 좋았을텐데
어째서 새로운 프레임 워크를 이용하게 된 걸까요?
이 내용을 알기 위해
HTML , CSS , JAVASCRIPT에 대해서 알아보겠습니다
HTML
사이트를 위해서 만들기 위한 뼈대라고 보면 이해하기 쉽습니다
저희가 물건들을 사고 그 물건들을 놓기 위해서는 반드시 선반이 필요하죠
이처럼 HTML은 사이트의 모든 요소이 놓을 곳들을 설정하고 배치하는 역할을 합니다
HTML 장점
수정과 관리가 용의 하며 파일용량이 적어 빠른 문서 전달 가능
별도의 전용 프로그램이 아닌 메모장으로도 편집이 가능
어떤 시스템 / 브라우저에서도 사용이 가능
HTML단점
스타일 추가 및 움직임은 다른 언어가 필요
구조 변화 및 기능 추가 다소 어려움
내용의 정확성/유효성 검증이 어려움
CSS
사이트에 뼈대가 만들어졌다면 그 위에 살이 채워져야겠죠
CSS는 선반이 있는 곳에다가 하나둘 씩 쌓아 올리는 물건과도 같습니다
그냥 텅 빈 선반을 보면 공허하고 비어있는 느낌이 있죠
그 내용들을 물건으로 채우듯 사이트의 시각적인 요소들을 채우는 용도로 사용하죠
CSS 장점
HTML 요소들 대부분 기능에 다양한 기능 추가 / 변경 / 폰트 사이즈 및 줄사이즈 변경 가능
통일감 있게 구성 가능하다 / 스타일 변경이 생겨도 모든 파일이 아니라 Css 만 변경할 수 있다
다양한 문서 형식 구성 및 위치를 자유롭게 사용 가능하다
CSS 단점
여러 사용자가 작업 시 각 작업 당 class 이름 설정 값 확인 어려움
코드가 죽어 삭제를 할 경우 문제 발생이 될 확률이 방대함
브라우저에서 진행하는 디버깅의 어려움
서버 사이드 렌더링시 페이지 사이즈가 더 커진다.
ㄴ react 생성이 된 사유에 적합한지 파악 필요
JAVASCRIPT
뼈와 살이 만들어졌다면 동작들도 있어야겠죠
뭔가 동작을 하거나 생동감이 있어야 더욱 흥미롭고 사이트를 더 이용할 테니까요
선반으로 치면 그냥 물건을 놓던 공간에 움직이는 선반들을 넣어서 선입선출이 가능하게 만드는 겁니다
그런 선반이 있다면 너무 나도 좋아서 너도나도 사용하고 싶겠죠?
JAVASCRIPT장점
쉬운 디버깅이 가능
컴파일링링을 이용한 사람 언어를 자동 기계어로 변경
유연한 코드 작성 가능
ㄴ 규칙이 없는 자유로운 방식으로 개발 속도 상승
다양한 개발 생태계 생성
ㄴ다양한 도구 및 환경이 구축되어 빠르게 상성이 가능함
JAVASCRIPT단점
동적 타이핑의 문제
변수 타입 명시하지 않고 선언이 가능하여 예상치 못한 에러 발생
비효율적인 DOM 조작
DOM를 활용해야 사용 가능하였던 javascript는 랜더링 속도가 느려지고 성능을 저하 시는 요인이 발생
복잡한 상태 관리
상태 관리가 직관적이지 않아 큰 규모의 프로젝트에서는 상태 관리에 어려움
브라우저 호환성 문제
각 각 브라우저의 호환성 문제로 인하여 개발과 테스트에 번거로움이 발생
이런 3가지의 언어들의 단점들과 함께 웹 개발의 변화도 함께 일어나게 됩니다
바로 사용자의 상호작용에 즉시 반응하는 싱글 페이지 애플리케이션(SPA) 방식이 필요해졌고
이를 효율적으로 구현할 수 있는 도구가 필요했습니다.
따라서 react는 페이스북의 개발자 Jordan Walke가 페이스북 UI의 복잡성을 해결하기 위해 만든 라이브러리입니다. React는 웹 애플리케이션에서 빠르고 효율적으로 UI를 관리할 수 있도록 도와줍니다.
react의 핵심 기능들로 인하여 3가지의 언어의 단점이 보완됨과 동시에 관리 역시 수월하게 되게 된 것이죠
react 핵심 기능
1. 컴포넌트 기반 아키텍처
React는 UI를 작은 컴포넌트라는 독립적인 단위로 나눠서 개발합니다. 이 컴포넌트는 재사용 가능하고, 독립적으로 동작하기 때문에 HTML의 반복적인 불필요한 코드들을 해결할 수 있게 됩니다
2. 동적 데이터 랜더링
데이터가 변할 때마다 가상 DOM에서 먼저 업데이트되고, 실제 DOM과 비교하여 필요한 부분만 갱신합니다
이를 통해 동적이고 실시간으로 변하는 데이터를 효율적으로 처리할 수 있게 됩니다.
3. 모듈화 된 CSS를 지원하는 방식
CSS Modules 사용 시 클래스 이름을 로컬로 자동 변환하여 다른 컴포넌트와 스타일이 충돌하지 않도록 보안할 수 있죠
4. JavaScript 코드 안에 스타일을 작성하는 방법
각 컴포넌트가 자체적으로 스타일을 관리할 수 있도록 도와주어, 스타일 충돌 문제를 해결하게 됩니다
5. 애플리케이션을 컴포넌트라는 독립적인 단위로 나누어 관리하는 방식
각 컴포넌트 별로 독립적인 상태로 관리를 하여 복잡한 상태를 보다 쉽게 관리가 가능합니다
6. 가상 DOM을 통한 성능 최적화
실제 DOM을 직접 조작이 아닌 변경 사항을 가상 DOM에서 먼저 처리한 후
실제 DOM과 비교하여 변경된 부분만 갱신할 수 있습니다
이를 통해 불필요한 렌더링을 방지하고 성능을 크게 향상할 수 있습니다
결론
React는 페이스북이 2013년에 공개한 자바스크립트 라이브러리로, 주로 동적인 웹 애플리케이션을 만들 때 사용됩니다. 웹 개발에서 사용자 경험을 개선하고
복잡한 UI를 효율적으로 관리하려는 필요성이 커지면서 React가 탄생하게 되었습니다.
컴포넌트 기반 구조와 효율적인 DOM 업데이트 방식 덕분에 많은 개발자들이 사랑하고 있으며, 웹과 모바일 애플리케이션 개발 모두에서 강력한 도구로 자리를 잡고 있죠
이번 react의 유래에 대해서 알아보면서 react 프레임 워크에 대한 중요성도 새삼 더 느껴지는 계기가 되었습니다
저 역시 프런트 앤드 개발자를 목표로 하고 있는 만큼 현대 복잡한 UI관리를 위한 react 프레임 워크를 다루는 건
매우 중요하다고 생각이 들었으며 프로젝트 생성을 할 때 react를 활용한 프로젝트 생성을 도전해 보려 합니다
부족한 실력이지만 재밌게 봐주시면 감사드립니다
오늘 포스팅은 여기까지입니다
다음은 react 파일 생성 및 기본적인 react의 tool부터 차근차근 이야기 해보도록 하겠습니다
지금까지 봐주신 여러분 정말 감사합니다