처음 만난 리액트(React)

state React에서의 state는 React 컴포넌트의 상태를 의미한다 => 리액트 Component의 변경 가능한 데이터 (state는 개발자가 정의해서 사용하며 JavaScript 객체이다) 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함! => state가 변경될 경우 component가 재렌더링되기 때문에 렌더링과 데이터 흐름 관련없는 값을 포함하면 불필요한 경우에 component가 다시 렌더링되어 성능을 저하시킬 수 있기 때문 (그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됨) state는 엄밀히 말하면 수정이 가능하긴 하지만 직접 수정 할 수 없다 (하면 안된다) Hooks 리액트 Component에는 Function Component와 Class Compon..

Components 리액트는 Component-Based라는 중요한 특징이 있다는 것을 배웠다 => 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포너트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다! React component는 JavaScript의 함수와 같은 역할을 한다고 생각하면 되는데 입력과 출력값이 다르다 React Component에서 입력은 props이고 출력은 React element이다! => 어떤한 속성들을 입력받아 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것이다 (element는 자바스크립트 객체 형태로 존재하면 화면에 보이는걸 기..

react elements Elements의 정의 리액트의 엘리먼트는 리액트 앱을 구성하는 요소를 의미한다 리액트 공식 홈페이지에서는 Elements are the smallest building blocks of React apps 라고 정의한다 => 리액트 앱을 구성하는 가장 작은 블록들 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되는 것이고 React의 Virtual DOM에 존재하는 엘리먼트가 React 엘리먼트가 되는 것이다 => 결국 React 엘리먼트는 DOM 엘리먼트의 가상 표현이라고 볼 수 있다 (DOM 엘리먼트는 React 엘리먼트에 비해 많은 정보를 담고 있기 때문에 상대적으로 크고 무겁다!) React Elements는 화면에서 보이는 것들을 기술한다 => 엘리먼..

A syntax extension to JavaScript => 자바스크립트의 확장 문법 JSX란 JavaScript + XML / HTML 📌JSX코드 1 const element = Hello, world!; h1 태그로 둘러싸인 html을 element 변수에 저장시킴 JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게됨 => JSX로 코드를 작성해도 최종적으로는 JavaScript 코드로 나옴 이 변환하는 역할을 React의 createElement 함수가 해줌 React.createElement()의 결과로 element 객체가 생성됨 createElement 의 파라미터로는 React.createElement( type, [props], [...childr..

리액트의 장점 빠른 업데이트 & 렌더링 속도 여기서 말하는 업데이트는 웹 사이트를 탐색할 때 화면의 내용이 바뀌는걸 의미함! => 메뉴에서 마이페이지를 선택했을 때 현재 보고있는 화면에서 마이페이지 화면으로 전환되는걸 생각하면 됨 리액트는 빠른 업데이트를 위해 내부적으로 Virtual DOM을 사용함 Virtual DOM은 말 그대로 가상의 DOM임 📌 DOM이란 Document Of Model로 하나의 웹사이트를 정의하는 객체이다 (= 하나의 웹사이트 정보를 모두 담고있는 큰 그릇) Virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 함 일반적으로 사용자와 상호작용을 하는 웹페이와 같은 경우 화면의 업데이트가 수시로 이뤄짐 => 화면이 업데이트 된다는 말은 곧 DOM이 수정된다는..