State Lifecycle 생명주기 React에서 모든 컴포넌트는 아래의 세가지 단계를 거침 ┌ 초기화 단계 ├ 업데이트 단계 └ 소멸 단계 위의 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하고 각 단계 속에서 호출되는 메서드들을 바로 생명주기 메서드 라고 부름 리액트는 웹에서 UI 데이터가 변경되면 자동으로 컴포넌트가 업데이트되고 동적으로 화면을 그려줌 제대로 된 기능을 수행하려면 이런 자동으로 업데이트 되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공해줘야 할 때도 있음 따라서, 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재함 └ 위의 사진은 리액트의 라이프 사이클을 나타낸 화면 생명주기의 각 메서드들의 역할 초기화 단계 ┌ 초기화 단계에서..
React에서 Functional Component는 없는 단어이다. 우선, 공식 사이트를 보게 되면, Functional Component(함수형 컴포넌트)라는 말은 존재하지 않는다. Functional Component(함수형 컴포넌트) 대신 Function Component(함수 컴포넌트)라고 찾아보게 된다면, 이에 대한 설명은 찾아볼 수 있다. 이에 대한 이유는, Function Component(함수 컴포넌트)는 참조 투명할 수도, 아닐 수도 있기 때문에 "Functional"(함수형) 수식어를 붙이는 것은 오해를 불러 일으킬 수도 있기 때문이다. └ 참조 투명성에 대해서는 알아서 검색해보길 추천한다! ※ 과거에는 공식 사이트에서도 "Functional Component" (함수형 컴포넌트) 라..
State & Props Props, State 란? 데이터를 다룰 때 사용되는 개념 State 란? 컴포넌트의 상태를 나타냄 가변 데이터 (컴포넌트의 내부에서 선언되기 때문) 직접 변경 가능 만약 state가 변경되면 컴포넌트를 다시 렌더링 해야함 외부에 공개하지 않고, 컴포넌트가 스스로 관리함 state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들(리스트에서 선택된 값, 체크박스에서 체크된 값 등) └ 위의 예시는 + 버튼을 누르면, 화면에 표시된 값을 1 증가 시키는 코드 ┌ State를 사용하기 위해 useState라는 Hook을 사용해야 함 ├ useState는 State 변수의 초기값을 매개변수로 전달하여 호출하고, 결과값으로는 배열을 반환함 ├ 반환된 배열에서는 useState 함..
JavaScript JavaScript 란? 웹 개발에 주로 사용됨 웹 페이지를 대화식으로 만드는 프로그래밍 언어 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행 클라이언트 측 스크립팅 언어 └ 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함 멀티 스레딩, 멀티 프로세싱 기능이 없음 예시 코드 └ 정적 타입을 지원하지 않으므로 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않음 TypeScript TypeScript 란? MS에서 개발하여 2012년 10월에 첫 출시됨 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작함 ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 됨 정적 타입 언어로 컴파일 시..
filter filter() 메서드 자바스크립트 배열의 내장 함수 주어진 함수의 테스트를 통과하는 모든 요소를 모아(true면 요소를 유지, false면 버림) 새로운 배열을 반환함 callback 함수는 호출되는 배열을 변화시키지 않음 따라서, 내가 원하는 값들을 필터링 할 수 있음 ※ callback 함수는 3개의 인수와 함께 호출됨 ┌ ⑴ 처리할 현재(대상) 요소값 ├ ⑵ 처리할 현재(대상) 요소의 인덱스 └ ⑶ filter을 호출한 배열 객체(=순회되는 배열 객체) 기본 사용법 filter()을 활용한 검색 예시 └ profiles 배열에 들어있는 profile.detail이 age를 포함하고 있으면 profiles 배열로 구성 filter()을 활용한 삭제 예시 └ profiles 배열에서 pr..
container-presentation Container(컨테이너) 란? 컴포넌트의 로직에 관한 대부분의 것들을 다룸 특히 API 호출, 데이터 조작, 이벤트 처리 등의 작업을 함 데이터와 데이터 조작에 관한 함수를 만들고 presentation에 제공함 Presentation(프리젠테이션) 란? UI에 표시할 요소를 만드는 부분 state를 직접 조작하지 않고, container에서 내려준 props의 함수에 의해 state를 변경함 이에 따라, useState, useCallback, dispatch 등 state와 관련된 훅이 하나도 없음 container-presentation(컨테이너-프리젠테이션) 란? 로직을 수행하는 컴포넌트와 markup을 통해 UI를 보여주는 컴포넌트가 분리된 것 이에 ..
