What is Redux? Redux는 Cross-Component State 또는 App-Wide State를 위한 state 관리 시스템이라고 한다. 즉, 애플리케이션 상호작용으로 변경된 정보를 화면에 표시하는 데이터(state)를 다수의 component나 더 나아가 App 전체에서 관리할 수 있도록 도와준다. 자세한 사항은 아래 링크를 참고할 수 있다. Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org Categories of State 이미 앞서 useState나 useReducer를 사용하여 그러한 데이터들을 관리했는데, 그 기능에 따라 아래 세가지로 구분지을 수 있다. Local S..
How Does React Work? 먼저 React가 어떻게 동작하는지 알아보자. React는 이전에도 언급했듯이 사용자 interface를 구축하기 위한 JavaScript library이다. 이는 절대 변하지 않는 React의 핵심 개념으로 구축하기 위해서 component를 사용한다. React가 component 개념을 통해 사용자 interface를 효과적으로 구성하며 이에 대한 업데이트 역시 component를 통해 진행된다. 이 과정에서 ReactDOM이라는 것이 나오는데 이는 웹에 대한 interface를 다루는 것이다. React는 사실 웹을 모른다. 브라우저와 전혀 관계가 없다. 어떻게 component를 다루는지는 알고 있지만 이러한 component에 HTML 요소들이 포함되어 있..
JSX가 무엇인지는 앞서 다뤄서 넘어가겠다. JSX란? JSX란? 아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다. // 📂 App.js function App() { return ( Let's get started! ); } export default App; 이것은 JSX라고 하며 JavaScript XML을 의미한다. 결국 HT coding-leaf.tistory.com React로 개발을 하다보면 JSX 형식으로 코드를 작성하게 된다. 하지만 브라우저는 JSX 형식을 인지하지 못하기 때문에 뒷단에서 변환하는 과정을 거친다고 했다. 덕분에 우리는 가독성 높고 간편한 JSX 형식으로 선언형 프로그래밍을 할 수 있게 되었다. 그러나, React를 사용할 때 무조건 ..
React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접적으로 와닫지 않는다. 그렇기에 React를 사용하는 사이트들이 어떻게 동작하는가에 대해서 살펴볼 필요성이 있다. 많이들 알고있고 사용하고 있는 OTT(over-the-top) 서비스 중 하나인 Netflix를 예로 들어보자면, 처음 로그인을 하고 특정 버튼들을 눌러서 여러 상호작용이 가능하다. 이 때에 무언가를 로딩하느라 기다릴 필요도 없다. 또한, 화면 전환도 빠르며 브라우저에서 여는 웹 사이트가 모바일 앱과 같은 동작을 한다고 여길 정도로 매우 부르럽게 작동한다. 이는 기존의 웹 사이트 동작 방식과 사뭇 다른 느낌으로 다가온다. 전..
React에 대한 공부가 필요한 시점에서 스스로의 의욕도 다질겸 스터디를 시작하게 되었다. udemy라는 사이트를 통해서 영상 강의가 이뤄지며 앞으로 꾸준히 공부하고 포스팅을 하고자 한다. 해당 강의에서 제공한 데모 프로젝트들이 존재하는데 아래 Github를 통해 볼 수 있다. GitHub - gurcks8989/React-Demo Contribute to gurcks8989/React-Demo development by creating an account on GitHub. github.com
