React4 [리액트 파보기] (4) Main Concept 2 5. state and lifecycle state는 컴포넌트 안에서 정의된 오브젝트이다. render 함수가 호출되려면 타이머를 정해두고 계속해서 업데이트가 되게 해주어야 하는데 이러한 번거로움을 줄이기 위해 업데이트를 감지하는 오브젝트인 'state'가 만들어졌다. state와 props 의 차이는? state는 컴포넌트 안의 데이터이기 때문에 컴포넌트 내부에서 컨트롤이 가능하고, props는 컴포넌트 밖에서 주어지는 데이터(정보)임으로 상황에 따라 주어진 데이터를 받아야 할 때 사용한다. state 에서 업데이트가 감지되면 render 함수가 호출되고 원하는 UI 컴포넌트를 출력할 수 있다. 하지만, 리액트에서는 state를 직접적으로 수정하는 것을 권장하지 않는다. 그 이유는 오브젝트 불변성과 관.. 2022. 5. 18. [리액트 파보기] (4) Main Concept 리액트의 메인 컨셉은 위와 같다. 리액트 훅은 비교적 최근에 추가된 내용으로 아직 메인 컨셉에 포함되지는 않았다. Hooks 카테고리에서 확인할 수 있다. 공식문서를 하나하나 들여다보고자 한다. 1. Hello world create-react-app 으로 프로젝트를 생성하면 index.js 라는 파일이 보이는데 이곳에서 index.html 파일과 리액트 컴포넌트를 연결해주는 작업을 한다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import '@fortawesome/fontawesome-free/js/all.js'; ReactDOM.render( Hello, world! , document.get.. 2022. 5. 14. [리액트 파보기] (2) Javascript위에서 동작하는 react 리액트는 자바스크립트 위에서 동작하는 라이브러리이다. 리액트의 동작원리를 이해하기 위해서는 오브젝트와 오브젝트 불변성에 대한 이해가 필요하다. 원시형데이터(문자, 숫자)를 변수에 할당하면 데이터 자체가 변수에 할당되지만, 오브젝트를 변수에 할당하면 오브젝트의 주소, 즉 참조값이 할당된다. 동일한 참조값을 가지고 있는 두 변수가 있다고 가정한다면, 메모리는 2개이지만, 참조값은 1개이다. 이말인 즉슨, 참조값을 가진 오브젝트가 변수 중 어느 한곳에서 수정되면 같은 참조값을 가진 모든 오브젝트가 수정되는 것이다. 참조값 자체는 바꿀 수 없지만 오브젝트의 데이터는 수정이 가능한 것이다. 리액트에서 자주 사용되어지는 Spread Operator를 사용하면 오브젝트를 복제하여 완전히 새로운 오브젝트를 만들게 되는.. 2022. 5. 14. [리액트 파보기] (1) React 란? React 란? 2013년도에 페이스북에서 제작하였고 User Interface 즉, UI를 만드는 라이브러리이다. 리액트를 한 마디로 정의하면, 웹 UI를 만드는 라이브러리 더 짧게 정의하면 컴포넌트들 이라고 표현할 수 있을 것이다 ✨ 어플리케이션, 프로젝트를 구현할 때 구성요소를 세가지 역할로 구분한 것을 MVC 패턴이라고 부르는데, 리액트는 여기서 view 를 담당한다. 컨트롤러를 중심으로 유저가 controller를 조작하면 model은 컨트롤러를 거쳐 view에게 유저에게 필요한 정보를 보내준다. model을 거치지 않아도 되는 정보는 view를 통해 유저에게 보여진다. React의 역할 사용자에게 UI를 보여주고 이벤트를 처리하는 일을 담당하는 것 웹페이지를 구축하는 것은 집을 짓는 것과 같다.. 2022. 4. 30. 이전 1 다음
