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. 개요 객체는 속성의 집합이고, 중괄호 내부에 key와 value의 쌍으로 표현함 파이썬의 dictionary key는 문자열 타입만 가능하고, 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 나타낸다. value는 함수 포함 모든 타입 가능하다 객체의 요소에 대한 접근은 점(.)이나 대괄호([])가 가능하다. 단 key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능하다 띄어쓰기가 있으면 .으로는 접근 못하고, key에서 ''으로 묶어야한다는게 무슨 말인지 알겠지 2. 속성명 축약 객체 정의할때, key와 할당하고자 하는 변수의 이름 value가 서로 같으면 key:value로 쓰던걸 key,로 축약 가능 예를 들어 다음과 같이 축약이 가능하다 3. 메소드명 축약 메소드를 value로 가질때..
1. 개요 참조 타입(reference type)에 해당하는 타입은 Array와 Object이며 객체라고도 말함 객체는 속성들의 모음이다. 2. 배열(array) 키와 속성들을 담고 있는 참조 타입의 객체 순서를 보장 주로 대괄호 []를 이용해 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능 배열의 길이는 array.length 형태로 접근 마지막 원소는 array.length-1로 접근 3. 배열의 메소드 3-1) array.reverse() 원본 배열 요소들의 순서를 반대로 정렬함 내림차순 정렬이 아니고, 그냥 뒤집는 것일 뿐 3-2) array.push() 배열의 가장 뒤에 요소를 추가함 3-3) array.pop() 배열의 마지막 요소를 제거함 근데 파이썬처럼 array.pop(2..
1. 함수(function) 데이터 타입에서 참조 타입(reference type)중 하나로 자바스크립트에서 함수를 정의하는 방법은 함수 선언식(function declaration), 함수 표현식(function expression)이 있다. 2. 함수 선언식(function declaration) 일반적인 프로그래밍 언어의 함수 정의 방식과 유사함 function 함수명(인자) { } 3. 함수 표현식(function expression) 표현식 내에서 함수를 정의하는 방식 파이썬의 lambda함수처럼, 함수명을 생략한 익명 함수로 정의가능함 변수 키워드 변수명 = function (인자) {} 표현식에 함수명을 명시하는 것도 물론 가능하다. 하지만 함수 호출에는 변수명으로 호출해야하며, 함수명으로는..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
