EnJinnier

전역변수보단 지역변수의 사용을 지향해야 한다. 14.1 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 가지며, 언젠가 소멸한다. 이처럼 변수는 생물과 유사하게 생성되고 소멸되는 생명주기(lifecycle)가 있다. 이때 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같고, 함수내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. (즉, 지역변수의 생명주기는 함수의 생명주기와 일치한다.) 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트엔진에 의해 먼저 실행된다. 이때,함수 몸체 내부에서 선언된 지역 변수의 생명 주기는 함수의 생명 주기와 대부분 일치하지만 지역 변수가 함수보다 오래 생존하..

13.1 스코프란? 스코프 : 유효범위를 말한다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다고 했다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다. 모든 식별자 (변수이름, 함수이름, 클래스이름 등)는 자신이 선언된 위치에 의해 다른코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 식별자 결정 이름이 같은 두 개 이상의 변수가 있을때 그중에서 어떤 변수를 참조해야 할 것인지를 자바스크립트 엔진은 결정하며 이를 식별자 결정이라고 한다. 스코프를 통해 어떤 변수를 참조할 것인지 결정한다. 스코프 내에서 식별자는 유일해야 하지..

Form 이란?양식. 텍스트 입력 뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택을 해야 하는 것 모두.사용자로부터 입력을 받기 위해 사용하는 것React 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리HTML 폼 : 엘리먼트 내부에 각각의 state가 존재Controlled Components사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트리액트가 통제함. -> 컨트롤드 컴포넌트는 그 값이 리액트의 통제를 받는 input form element위 그림의 왼쪽은 HTML 폼, 오른쪽은 Controlled 컴포넌트이다.html 폼에서는 각 엘리먼트가 자체적으로 스테이트를 관리한다.따라서 input, textarea, select 태그가 각각 내부의 스테..

12.1 함수란? 일련의 과정을 문으로 구현하고 코드 블록으로로 감싸서 하나의 실행 단위로 정의한 것 - 매개변수(parameter): 함수 내부로 입력을 전달받는 변수 - 인수(argument): 입력 - 반환값(return value): 출력 함수 사용의 장점 - 유지보수의 편의성을 높임 - 코드의 재사용 - 실수를 줄여 코드의 신뢰성을 높임 12.3 함수 리터럴 자바스크립트의 함수는 객체 타입의 값임. 따라서 함수도 함수 리터럴로 생성할 수 있으며, 함수 리터럴은 function 키워드, 함수이름, 매개 변수목록, 함수 몸체로 구성된다. 12.4 함수 정의 함수를 정의하는 방법에는 4가지가 있다. 12.4.1 함수 선언문 함수 선언문은 함수 이름을 생략할 수 없다. 또한, 이름이 있는 기명 함수 리..

List 란? 같은 아이템을 순서대로 모아 놓은 것 리스트를 위해 사용하는 자료 구조가 배열. React에서는 이 배열을 사용해서 리스트 형태로 엘리먼트들을 렌더링 할 수 있음. Key란? 각 객체나 아이템을 구분할 수 있는 고유한 값 React에서의 key는 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열을 의미함. 여러 개의 Componenet 렌더링 하기 React에서는 앞에서 나온 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링 할 수 있다. 같은 컴포넌트를 화면에 반복적으로 나타내야 하는 경우, 동적으로 화면의 내용이 바뀌는 경우에는 map()함수를 사용한다. map() 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것. 예시를 보자. const doubled..

Conditional Rendering 이란? : 조건부 렌더링(조건에 따른 렌더링). 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미함. (*condition: 조건. 프로그래밍에서 사용하는 조건문 같은 것) 조건부 렌더링의 예) 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가리는 것. function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } 위의 두 함수 컴포넌트를 조건부 렌더링을 사용하여 회원인지 아닌지에 따라 선택적으로 보여주는 코드는 다음과 같다. function Greeting(props) { const isLoggedIn = props.isLo..

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 둘의 차이는 다음과 같다. 원시 값 객체 변경 불가능한 값 변경 가능한 값 원시 값을 변수에 할당 시 변수(확보된 메모리 공간)에는 실제 값이 저장됨 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨 (=값에 의한 전달) 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨 (= 참조에 의한 전달) 11.1 원시 값 11.1.1 변경 불가능한 값 ..

Event 란? : 특정 사건을 의미. ex) 사용자가 버튼을 클릭한 사건 -> 버튼 클릭 이벤트 이러한 이벤트들이 발생했을 때 이벤트를 처리하는 것을 이벤트를 핸들링 한다고 표현함. DOM의 Event Activate 위 코드는 DOM에서 클릭 이벤트를 처리하는 예제 코드이다. 버튼이 눌리면 Activate라는 함수를 호출하도록 되어 있다. => DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해서 전달 리액트의 Event Activate 위의 DOM코드와 동일한 기능을 하는 리액트코드임. 차이점 - onClick -> camel 표기법 사용 - 이벤트를 처리할 함수를 문자열로 전달하는 DOM과 달리 리액트에서는 함수 그대로 전달 (*카멜 케이스(카멜 표기법) : 첫 글자는 소문자로 시작하되..

10.1 객체란? 자바스크립트를 구성하는 거의 "모든 것". 원시 값을 제외한 나머지 값(함수, 배열, 표현식 등)은 모두 객체이다. 단 하나의 값만 나타내는 원시 타입과 달리 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 한다. 객체는 0개 이상의 프로퍼티로 구성된 집합이라고도 할 수 있는데, 프로퍼티는 키key와 값value로 구성된다. 이때 프로퍼티 값value이 함수일 경우, 일반 함수와 구분하기 위해 메서드method라고 부른다. - 프로퍼티: 객체의 상태를 나타내는 값(data) - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 이처럼 객체는 프로퍼티(값)와 메서드(동작)를 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조..

9.1 타입 변환이란? 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환, 또는 타입 캐스팅 이라고 한다. 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다. 개발자는 코드오류가 발생하지 않도록 이러한 암묵적 타입 변환의 발생을 이해하고 예측해야 한다. 불리언 타입으로의 암묵적 타입 변환 아래 값들은 false로 평가되는 Falsy 값이다. Falsy 값 이외의 모든 값은 모두 true로 평가되는 Truthy 값이다. 9.3 명시적 타입 변환 명시적으로 타입을 변경하는 방법은 다양하다. 1. 표준 빌트인 생성자 함수 (String, Number, Boolean)를 new연산자 없이 호출하는 방법 2. ..