CodeBottlehun's Web-Note.

props (properties) 컴포넌트 속성을 설정할 때 사용하는 요소. component = ( props ) => {props.elementName} defaultProps > 기본으로 사용하려면 Component.defaultProps = { elementName = 'blabla'} props.children > 컴포넌트 Tag 사이에 있는 내용을 보여주는 요소 비구조화 할당 문법을 통해 props 내부 값 추출 가능 const {name, children} = props; 을 사용하면 내부에 props 키워드 생략 가능. propsTypes > props의 Type을 정해줄 수 있음. import PropTypes form 'prop-types' component.propTypes = { e..

https://velog.io/@zofqofhtltm8015/Axios-사용법-서버-통신-해보기 Axios는 브라우저, Node.js 를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 특징 - 운영 환경에 따라 XMLHttpRequest 객체 또는 Node.js의 http api 사용 - Promise(ES6) API 사용 - 요청과 응답 데이터의 변형 - HTTP 요청 취소 / 요청과 응답을 JSON 형태로 자동 변경. HTTP Methods - 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단 - HTTP methods 중 Axios 통신하는데 많이 사용하는 메세ㄷ, > GET

> 콜백 함수로 프로퍼티 수정 class App extends React.Component { constructor(props) { super(props); this.state = { count: 1, }; this.increateCount = this.increateCount.bind(this); } increateCount() { this.setState(({ count }) => ({ count: count + 1 })); } render() { return ; } } export default App; on add 부분에서 에러가 발생한다 (TypeError:this.setStateis is not a function) 해당 Code의 this는 "Counter" Component을 가리키므로 상..

> 배열을 활용한 컴포넌트 array.map() 함수를 이용하여 컴포넌트를 구성할 수 있다. import React from 'react'; class ListExample extends React.PureComponent { render() { const priceList = [1000, 2000, 3000, 4000]; const prices = priceList.map((price) => 가격: {price}원); return ( 가격 목록 {prices} ); } } export default ListExample; > reder()함수의 트리 구조의 노드 반환 16.3 버전 전까지만 해도 트리 구조의 노드 1개만 반환 할 수 있었고, 여러 개의 노드를 반환하고 싶은 경우 의미 없는 최상위 노드를..

> Diagram https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl > learning page https://www.w3schools.com/react/react_lifecycle.asp React Lifecycle React Lifecycle Lifecycle of Components Each component in React has a lifecycle which you can monitor and manipulate duri..

JSX -> JavascriptXML의 줄임말. > 해당 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. (리액트 엔진은 JSX의 XML 구조를 분석하여 JS Code로 변환) > 이러한 리액트 엔진은 선언형 화면(Declarative View)기술이라 부른다. > div / span 같은 HTML 태그를 사용 할 수 있다. 또한 JSX로 만들어진 Component를 태그 형식으로 사용 할 수 있다. JSX 문법 > 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. Virtual DOM은 컴포넌트의 변화를 효율적으로 비교할 수 있도록 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 ..

> Debounce Google 연관 검색어 도출 기능 함수 호출 전에 딜레이를 발생시켜, 이전 중복된 호출은 무시하고, 이후 호출의 수행만 이끌어내는 함수. function debounce(func, delay) { let inDebounce; return function (...args) { if (inDebounce) { clearTimeout(inDebounce); } inDebounce = setTimeout(() => func(...args), delay); }; } const run = debounce((val) => console.log(val), 100); run('a'); run('b'); > Throttle - 중복 요청 과정 생략 Faceb..

> RSC VScode에서 RSC 탭 누르면 자동 생성 Keyword Description RCC Create the basic-react-component code RCCP Create the react-component code with property type RCFC Create the react-component code with Life-Cycle RPC Create the pure-react-component code RSC Create the method-type-react-component code RSCP Create the method-type-react-component code with Property type > Module 내보내기 > export default MyModule..