기록하는 개발자

https://mingmeng030.tistory.com/216?category=1025066 컴포넌트 - 3. property Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import mingmeng030.tistory.com 앞선 위 게시물에서 상위 컴포넌트가 하위 컴포넌트에 property를 전달할 수 있음을 설명했다. 만약 하위 컴포넌트에서 전달받은 property를 변경해야 할 때는 어떻게 해야할까? property의 원본을 수정할 수 있는 함수를 하위 컴포넌트에 함께 제공하면 된다. 이러한 함수를 callback ..

react 컴포넌트 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 그렇다면 두 방식의 차이점은 무엇일까? 1. 선언 방식 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const Hello = 'hello'; return {Hello} } } export default App; 1. class 키워드가 필요하며, Component 상속을 받아야한다. 2. render() 메소드가 반드시 필요하다. 3. 함수형보다 메모리 자원을 더 많이 사용한다. 4. state, lifeCycle 관련 기능(생명주기함수)사용이 가능하다. 5. 함수형보다 메모리 자원을 더 많이 사용한다. 6..

컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(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..

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); /..