EnJinnier

Hooks의 개념 일반적으로 함수 컴포넌트는 클래스 컴포넌트와 다르게 대부분의 기능이 지원되지 않는다. 따라서 함수 컴포넌트에 클래스 컴포넌트와 동일한 기능을 지원하기 위해서 나온 것이 바로 Hook이다. React의 state와 생명주기 기능의 갈고리(hook)를 걸어 원하는 시점에 정해진 함수를 실행되도록 만들었고, 이때 실행되는 함수를 Hook이라고 한다. Hook의 이름은 모두 use로 시작한다. 대표적인 훅들에 대해 알아보자. useState() - state를 사용하기 위한 hook 예시로 이해해보자. 여기 버튼을 클릭하면 카운트를 하나씩 증가시키고 현재 카운트를 보여주는 카운터 함수 컴포넌트 코드가 있다. 그런데 만약 카운트를 함수의 변수로 선언해서 사용하게 되면 버튼 클릭 시 카운트 값을 ..

8.1 블록문 블록문(코드블록,블록) : 0개 이상의 문을 중괄호로 묶은 것. 문의 끝에는 세미콜론을 붙이는게 일반적이지만 블록문은 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 8.2 조건문 조건문 : 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정. 자바 스크립트는 if...else 문과 switch 문으로 두 가지 조건문을 제공함. if ... else 문 else if 를 추가할 수도 있다. switch 문 이때 break문을 사용하여 꼭 탈출하도록 해야하며 break문을 넣어주지 않으면 이후 과정을 계속 진행하게 된다. 8.3 반복문 반복문 : 조건식의 평가 결과가 참인 경우 코드 블록을 실행함. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블..

State란? React에서의 state는 React 컴포넌트의 상태를 의미함. 쉽게 말하면 React 컴포넌트의 변경 가능한 데이터를 State라고 부른다. - 이 State는 사전에 미리 정해진 것이 아니라 React 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용함. - State를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 것만 State에 포함시켜야 한다는 것. (스테이트가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련없는 값을 포함하면 불필요한 경우에 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문) - state는 하나의 JavaScript 객체임 다음 예제를 보자. 모든 클래스 컴포넌트는 constructor(생성자)라는 이름의 함수를..

연산자(operator) : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의값을 만들게 함. 피연산자(operand) : 연산의 대상 다음은 자바스크립트가 제공하는 다양한 연산자이다. 7.1 산술 연산자 산술연산자 : 피연산자를 대상으로 수학적 계산을 수행. (산술연산이 불가능한 경우, NaN을 반환) 산술연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다. 이항 산술 연산자 (부수 효과 : 피연산자의 값을 변경하는 효과) 단항 산술 연산자 여기서 증가/감소(++/--) 연산자는 위치에 의미가 있다. (피연산자의 앞인지, 뒤인지에 따라 의미가 달라짐) 만약 숫자타입이 아닌 피연산자에 연산자를 사용하면 피연산자를 숫자 타입..

매우 중요하게 사용될 개념이다. Component란? 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 컴포넌트들을 레고 블럭 조립하듯이 끼워서 페이지를 구성한다고 생각하면 편하다. 리액트 컴포넌트는 자바스크립트의 함수와 같은 역할을 하게 되는데, 이때 리액트 컴포넌트의 입력은 props, 출력은 앞 장에서 배운 리액트 엘리먼트가 된다. => 결국 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는 것 붕어빵 굽는 과정과 비슷함 컴포넌트 - 붕어빵을 굽는 틀 Props란? property. 리액트 컴포넌트의 속성 Props - 붕어빵에 들어가는 재료 React 컴포넌..

Element란? 리액트 앱을 구성하는 요소. 리액트 앱을 구성하는 가장 작은 블록들. DOM엘리먼트라고도 함. (Elements are the smallest building blocks of React) 리액트 Elements는 자바스크립트 객체 형태로 존재함. (=컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체) - 불변성의 특징 : 한번 생성되면 마음대로 바꿀 수 없음 Element의 실제 모습 ^ 버튼을 나타내기 위한 엘리먼트 type: 타입에 html 태그 이름이 문자열로 들어가는 경우 엘리먼트는 해당 태그 이름을 가진 DOM노드를 나타냄 props: 속성에 해당 이 엘리먼트가 실제로 렌더링이 되면 아래와 같은 DOM엘리먼트가 됨 엘리먼트의 타..

자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 하나하나 자세히 살펴보자. 6.1 숫자 타입 int, long, float, double 등의 다양한 숫자 타입을 가진 다른 프로그래밍 언어와 달리 자바스크립트는 하나의 숫자 타입만을 가진다. 따라서 모든 수를 실수로 처리하며 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. ( 모두 64비트 부동소수점 형식을 따름) //모두 숫자타입 var integer = 10; //정수 var double = 10.12; //실수 var negative = -20; //음의 정수 또한, 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않아 이들 값을 참조하면 모두 10진수로 해석된다. 또한 양의 무한대(Infinity), 음의 무한..

5.1 값 값(value) : 식이 평가되어 섕성된 결과 모든 값은 데이터 타입을 가지며 데이터 타입에 따라 메모리에 저장된 값이 다르게 해석될 수 있다. 값은 다양한 방법으로 생성할 수 있으며 가장 기본적인 방법은 리터럴을 사용하는 것이다. 5.2 리터럴 리터럴(literal) : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법. 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호로 표기한 코드. 5.3 표현식 5.4 문 표현식(expression) : 값으로 평가될 수 있는 문 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이뤄질 수 있으며 값으로 평가될수 있는 문은 모두 표현식이다. 문(state..

4.1 변수란 무엇인가? 변수(variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자쳬 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름. 식별자라고도 함 변수값 : 변수에 저장된 값 할당(대입, 저장) : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어 들이는 것 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다. 4.3 변수 선언 변수 선언 = 변수를 생성하는 것 var, let, const 키워드를 사용 var score; //변수 선언(변수 선언문) 위 코드는 변수를 선언만 하고 값을 할당하지는 않은 상태이다..

JSX란? : 자바스크립트의 문법을 확장시킨 것 (확장 문법) (Syntax Extension to JavaScript) -> JSX는 자바스크립트와 XML, HTML을 합친 것 예시를 살펴보자. 특이하게 변수선언과 html 코드가 합쳐져 있는 것을 볼 수 있는데, 이것이 JSX 코드의 특징이다. (자바스크립트 코드 + HTML 코드) 이 코드가 하는 역할은 h1 태그로 둘러싸인 문자열을 element라는 변수에 저장하는 것이다. JSX의 역할 그렇다면 왜 굳이 JSX를 사용할까? JSX는 사실 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다. 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 되는데, 여기서 JSX ..