State LiftingState Lifting (State 끌어올리기)React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식이자 단방향 데이터 흐름을 따름만약, 하나의 상태가 여러 컴포넌트에 영향을 준다면, 해당 컴포넌트들 간의 가장 가까운 공통의 상위 컴포넌트에 상태를 끌어올리면 됨이것을 State Lifting (State 끌어올리기)라고 함공유될 상태를 소유한 컴포넌트가 진리의 원천이 됨하지만 실제로는 하위 컴포넌트에서 이벤트가 일어나 상위 컴포넌트의 상태를 갱신하는 경우가 존재하고, 이는 역방향 데이터 흐름처럼 보일수도 있음이를 위해 React에서 제시한 방법은 상위 컴포넌트에 정의된 상태를 변경하는 함수 자체를 하위 컴포넌트에 props로 전달하고, 하위 컴포넌트에서 이 ..

State useState()를 이용해서 4씩 오르는 카운터 만들기 위 코드를 실행하고 버튼을 클릭했을 때 ┌ 첫번째 버튼 클릭 시 : └ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ 두번째 버튼 클릭 시 : ┌ count = 0, 현재 count = 0, 임시저장 count = 1 └ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ 세번째 버튼 클릭 시 : ┌ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ count = 0, 현재 count = 0, 임시저장 count = 1 └ count = 0, 현재 count = 0, 임시저장 count = 1 └ 네번째 버튼 클릭 시 : ┌ count = 0, 현재 count ..

State Lifecycle 생명주기 React에서 모든 컴포넌트는 아래의 세가지 단계를 거침 ┌ 초기화 단계 ├ 업데이트 단계 └ 소멸 단계 위의 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하고 각 단계 속에서 호출되는 메서드들을 바로 생명주기 메서드 라고 부름 리액트는 웹에서 UI 데이터가 변경되면 자동으로 컴포넌트가 업데이트되고 동적으로 화면을 그려줌 제대로 된 기능을 수행하려면 이런 자동으로 업데이트 되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공해줘야 할 때도 있음 따라서, 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재함 └ 위의 사진은 리액트의 라이프 사이클을 나타낸 화면 생명주기의 각 메서드들의 역할 초기화 단계 ┌ 초기화 단계에서..

스코프자바스크립트의 변수에는 유효 범위가 있음변수와 같은 식별자에 대한 유효 범위를 스코프라고 함유효범위는 전역공간과 지역공간으로 크게 두가지로 나뉘며, 이에따라 변수 또한 전역변수와 지역변수로 나뉨 전역 변수스크립트 영역 어디에도 힘을 발휘 할 수 있는 변수변수가 어떤 블록안에 들어가있지 않을 경우 전역변수라 함 지역 변수정해진 영역에서만 힘을 발휘하는 변수보통 블록 { } 안이나, 함수 안에서만 변수에 접근할 수 있음 스코프 체인식별자의 유효범위 즉, 스코프를 안에서부터 밖으로 검색해 나가는 것을 스코프 체인이라고 함컨텍스트는 해당 코드의 외부환경정보를 수집해 올 때 스코프 체인이 발생 └ a가 1이 되는 이유 : 바로 위 식별자의 Environment를 참조해오기 때문 ① 먼저 oute..

React에서 Functional Component는 없는 단어이다. 우선, 공식 사이트를 보게 되면, Functional Component(함수형 컴포넌트)라는 말은 존재하지 않는다. Functional Component(함수형 컴포넌트) 대신 Function Component(함수 컴포넌트)라고 찾아보게 된다면, 이에 대한 설명은 찾아볼 수 있다. 이에 대한 이유는, Function Component(함수 컴포넌트)는 참조 투명할 수도, 아닐 수도 있기 때문에 "Functional"(함수형) 수식어를 붙이는 것은 오해를 불러 일으킬 수도 있기 때문이다. └ 참조 투명성에 대해서는 알아서 검색해보길 추천한다! ※ 과거에는 공식 사이트에서도 "Functional Component" (함수형 컴포넌트) 라..

스택 & 큐스택출입구가 하나인 우물 형태의 데이터 구조 스택의 입력과 출력 순서스택의 출입구는 하나입력의 순서와 출력의 순서가 다름입력 순서 : 1 - 2 - 3 - 4 - 5출력 순서 : 5 - 4 - 3 - 2 - 1 큐양방향 출입이 가능한 파이프 형태의 데이터 구조 큐의 입력과 출력 순서입구와 출구가 다름 → 제일 먼저 들어간 데이터가 제일 먼저 나옴입력의 순서와 출력의 순서가 같음입력 순서 : c - b - a출력 순서 : c - b - a 실행 컨텍스트와 호이스팅실행 컨텍스트실행할 코드에 제공할 환경정보를 모아둔 객체자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 해당 컨텍스트를 콜스택에 쌓아둠실행 컨텍스트를 생성하기 위한 가장 ..

State & Props Props, State 란? 데이터를 다룰 때 사용되는 개념 State 란? 컴포넌트의 상태를 나타냄 가변 데이터 (컴포넌트의 내부에서 선언되기 때문) 직접 변경 가능 만약 state가 변경되면 컴포넌트를 다시 렌더링 해야함 외부에 공개하지 않고, 컴포넌트가 스스로 관리함 state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들(리스트에서 선택된 값, 체크박스에서 체크된 값 등) └ 위의 예시는 + 버튼을 누르면, 화면에 표시된 값을 1 증가 시키는 코드 ┌ State를 사용하기 위해 useState라는 Hook을 사용해야 함 ├ useState는 State 변수의 초기값을 매개변수로 전달하여 호출하고, 결과값으로는 배열을 반환함 ├ 반환된 배열에서는 useState 함..

JavaScript JavaScript 란? 웹 개발에 주로 사용됨 웹 페이지를 대화식으로 만드는 프로그래밍 언어 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행 클라이언트 측 스크립팅 언어 └ 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함 멀티 스레딩, 멀티 프로세싱 기능이 없음 예시 코드 └ 정적 타입을 지원하지 않으므로 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않음 TypeScript TypeScript 란? MS에서 개발하여 2012년 10월에 첫 출시됨 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작함 ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 됨 정적 타입 언어로 컴파일 시..