1. state란 무엇인가 리액트에서 state는 리액트 컴포넌트의 상태 상태라는 단어가 정상이냐, 비정상이냐를 나타내는 것보다는 리액트 컴포넌트의 데이터라는 의미에 더 가깝다. 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다. state는 사전에 미리 정해진 것이 아니라, 리액트 컴포넌트를 개발하는 개발자가 직접 정하는 것이다. state를 정의할 때 중요한 점은 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. state가 변경될 경우 컴포넌트가 재렌더링되기 때문에, 렌더링과 데이터 흐름에 관련 없는 값을 포함시키면, 컴포넌트가 다시 렌더링되어 성능을 저하 시킬 수 있다. 그래서 렌더링과 데이터 흐름에 관련 있는 값만 state에 포함하도록 해야하며, 그렇지 ..
1. 컴포넌트 기반의 구조 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 에어비앤비 웹사이트 화면을 캡쳐하고 컴포넌트를 간단히 표시한 것이다. A, B로 표시된 부분이 리액트 컴포넌트이다. 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다. 이처럼 리액트는 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다. 2. 리액트 컴포넌트..
1. element의 정의 리액트 앱을 구성하는 요소 Elements are the smallest building blocks of React apps "엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들" 개발자 도구에서 볼 수 있는 elements 탭의 elements는 DOM element이고, HTML의 요소이다. 실제로 화면에서 볼 수 있는 것들 그러면 react element는..? 리액트 초창기에는 "화면에 나타나는 내용을 기술한 자바스크립트 객체"를 나타냈다고 한다 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되고, 리액트의 Virtual DOM에 존재하는 엘리먼트가 리액트 엘리먼트가 된다 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이 된다 DOM 엘리먼트는 리액트 엘리먼트..
1. JSX A syntax extension to JavaScript "자바스크립트의 확장 문법" 자바스크립트의 문법을 확장시킨 것 JavaScript와 XML/HTML을 합친 것 JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것 1-1) 예시 다음은 간단한 JSX 코드 대입연산자 =의 오른쪽에 특이하게 HTML코드가 나온다 HTML의 태그를 사용해 Hello, world!라는 문자열을 값으로 갖고 있다 const element = Hello, world!; 결과적으로 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드가 된다. 이 코드가 하는 역할은 태그로 둘러싸인 문자열을 element라는 변수에 저장..
1. 정의 react 공식 웹사이트에서는.. A JavaScript library for building user interfaces "사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리" - 라이브러리 = "자주 사용되는 기능을 정리해 모아 놓은 것" 1-1) 사용자 인터페이스(user interface) UI로 줄여서 부른다 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것 웹사이트에서 버튼, 텍스트 입력창 등이 모두 UI 버튼을 눌러 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여주어서 사용자들이 반응을 함 1-2) SPA(single page application) 하나의 페이지만 존재하는 웹사이트, 애플리케이션 수백 개의 웹페이지..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
