기록하는 개발자

컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(lifecycle) 이라고 한다. 이 생명주기마다 함수를 가지고 있으며, 함수를 이용해 특정 시점에 원하는 동작을 하게 만들 수 있다. 생명주기 함수는 총 8개로, react 엔진에서 자동으로 호출한다. 따라서 개발자가 임의대로 호출할 수 없다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서부터 페이지에서 사라질 때까지이다. +) 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다(함수형컴포넌트에서는 주로 Hooks를 사용한다). 컴포넌트의 생명주기는 크게 컴포넌트의 생성, 생성 완료, 갱신 완료, 소멸 완료로 구분되어진다. 컴포넌트의 생성, 생성 완료 사이를 Mount, 생성 완료와 갱신 완료 사이를 Update, 갱신 완료와 ..

property의 특징이 컴포넌트 내부에서 값을 변경할 수 없다는 점이었다면, state는 반대로 컴포넌트 내부에서 값을 변경해야 하는 경우 사용한다. state 값을 변경하거나 저장할 수 있는 객체로 보통 버튼 클릭, 값 입력 등의 이벤트와 함께 사용된다. state 사용 시 주의점 1. 반드시 생성자(constructor)에서 초기화 해야한다. 2. state 값을 변경할 때는 반드시 setState()를 사용해야한다. 3. setState()는 비동기로 처리되며 setState() 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다. state를 변경할 때 setState를 사용해야하는 이유 setState() 함수를 쓰지 않고 state를 변경하는 것이 불가능한 것은 아니다. ..

Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import React from "react"; import MyComponent from './MyComponent'; class App() extends React.Component{ render(){ return ( ); } } export default App; MyComponent에서는 name이라는 이름의 프로퍼티로 전달받은 "msg" 문자열을 render 함수에서 참조한다. 아래 코드에서 this.props.name으로 프로퍼티 값을 참조하고 있음을 확인할 수 있다. ..

컴포넌트의 개념 기존 웹 구동 방식 정보(Model), 화면(View), 구동(Controller)코드를 분리한 MVC 방식으로 관리되었다. 장점 - 코드를 효율적으로 관리할 수 있다. 단점 - MVC 간 의존성이 높아 재활용이 어렵다(독립성이 떨어져 하나만 수정이 어려움). → 웹사이트 화면의 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 것에 착안하여 컴포넌트가 탄생한다. react의 웹 구동 방식 MVC의 View를 독립적으로 구성하여 재사용이 용이하다(기존 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있다). ※컴포넌트의 이름컴포넌트의 이름의 첫 번째는 반드시 대문자로 이루어져야한다. 이는 기존 HTML 마크업과 구분하기 위해서 이다. 기존 HTML 마크업 : , 컴포넌트 : , 컴포넌트의 ..

JSX : JavaScriptXML 자바스크립트에 XML을 추가한 확장형 문법 XML 또한 HTML의 표현법을 확장한 문법이기 때문에 HTML을 다룰 줄 안다면 JSX도 쉽게 체득할 수 있다. 대신 JSX는 HTML이 아니라 마크업 규칙을 따르기 때문에 아래와 같은 차이점이 발생한다. //HTML //JSX - JSX 에서는 element의 시작표시 의 짝이 맞지 않으면 react 엔진이 jsx를 분석할 때 오류가 발생한다. 1. index.js 파일은 npm run start 혹은 yarn start를 통해 리액트 서버를 구동했을 때 가장 먼저 실행되는 파일이다. 2. index.js는 'root'라는 id를 가진 element에 App component를 출력한다. (root라는 id를 가진 elem..

Promise(프로미스) 비동기 상태를 값으로 다룰 수 있는 객체다. Promise의 세 가지 상태 1. 대기 중(pending): 결과를 기다리는 중이다. 2. 이행됨(fulfilled): 수행이 정상적으로 끝났고 결괏값을 가지고 있다. 3. 거부됨(rejected): 수행이 비정상적으로 끝났다. - 이행됨, 거부 상태를 처리됨(settled)상태라고 부른다. 프로미스는 처리됨 상태가 되면 더 이상 다른 상태로 변경되지 않는다. →대기 중 상태일 때만 이행됨 또는 거부됨 상태로 변할 수 있다. then 처리됨(settled)상태가 된 프로미스를 처리할 때 사용되는 메소드다. Promise가 처리됨 상태가 되면 then 메서드의 인수로 전달된 함수가 호출된다. 비동기 함수 예제 // 이해를 돕기 위한 P..

foreach for이 for(int i =0; i{ const [key, value] = str.split('='); result[key]=value; // result = { 'vanilla' : '10' } }); return result; } // result = { //'vanilla' : '10', //'mango' : '15' }, //'matcha' : '20' } // }; map foreach는 let을 이용해 result를 선언하였다. 불변 변수인 const 를 사용하려면 map을 이용할 수 있다. map() 은 각 배열 요소를 정의된 함수를 통해 새배열을 반환한다. 예시를 통해 살펴보자. function parser(qs){ const queryStr = qs.substr(1); /..

객체확장표현 JS문법에서 사용되는 key-value 데이터 형식의 객체를 확장하여 표현할 수 있다. // const a = 0; const b = 0; let number = { a, b }; // let favoriteString = 'favorite'; let myColors = { ['my'+favoriteString] : 'ivory', }; // let count = { add(x,y) {console.log(x+y);}, mul(x,y) {console.log(x*y);}, }; 1 - 객체의 변수를 선언 할 때 key 값을 생략하면 자동으로 키의 이름으로 키값을 지정해준다. ex) number = { a : a, b : b } 2 - 객체 생성 시 블록 내에 대괄호 [] 를 사용하여 계산된 ..