분류 전체보기

📌 Higher Order Component(HOC) 를 인자로 받아 를 리턴하는 함수 - 컴포넌트 안에 있는 로직을 다시 재활용할 수 있는 고급 기술이다. - React API의 한 파트가 아니다. - 리액트 컴포넌트를 상속받거나 재활용하는 방식이 아니라 조합 방식으로 하는 본성으로부터 야기된 패턴이다. HOC = function(컴포넌트) {return 새로운 컴포넌트;} withRouter() 보통 with가 붙은 함수가 HOC인 경우가 많다. 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org withLoading.jsx import React, { useState, useEffect } from "rea..

📌 CSS in JS CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaS..

📌 라우팅 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 📌 SPA (Single Page Application) 서버로부터 각각의 페이지를 요청하는 것과 다르게 한 번에 덩어리를 받아오고 내부에서 url에 맞춰 보여줄 것만 보여주는 것이다. 즉, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. SPA 라우팅 과정 1. 브라우저에서 최초 ' / ' 경로로 요청을 하면 2. React Web App을 내려준다. 3. 내려받은 React App에서 ' / ' 경로에 맞는 컴포넌트를 보여준다. 4. React App에서 다른 페이지로 이동하는 동작을 수행하면 5. 새로운 경로에 맞는 컴포넌트를 보여준다. 📌 react-router-do..

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버 라이딩할 수 있게 해준다. constructor componentWillMount => getDerivedStateFromProps render (최초 랜더) componentDidMount class App extends React.Component { state = { age: 39, }; constructor(props) { super(props); console.log("constructor", props); } render() { console.log("render"); return ( Hello {this.props.name} - {this.state.age} ); } // class component의..

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다. Component 생성 및 마운트 constructor componentWillMount render (최초 랜더) componentDidMount class App extends React.Component { state = { age: 39, }; constructor(props) { super(props); console.log("constructor", props); } render() { console.log("render"); return ( Hello {this.props.name} - {this.state.age} ); } componentWillMount() { conso..

Html DOM을 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나야 한다. - camelCase로만 사용할 수 있다. ex) onClick, onMouseEnter - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. ex) 이벤트 = {함수} - 실제 DOM 요소들에만 사용 가능하다. 리액트 컴포넌트에 사용하면 props로 전달한다. 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org 버튼 클릭했을 때 이벤트가 적용되는 대표적인 예시! 🔍 이벤트 핸들링을 활용하여 간단한 검색창을 만들어볼 것이다. 1. 아무것도 입력하지 않았을 땐 p태그 없음 (state typing속성) 2. ..

Props와 State Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이다. state는 컴포넌트 내부에서 변경할 수 있는 데이터이다. 둘 다 변경이 발생하면, 랜더가 다시 일어날 수 있다. Render 함수 Props와 State를 바탕으로 컴포넌트를 그린다. 그리고 Props와 State가 변경되면, 컴포넌트를 다시 그린다. 컴포넌트를 그리는 방법을 기술하는 함수가 render 함수이다. Function 컴포넌트(props) { return JSX; } // props에는 {message: "안녕하세요"} 객체가 들어옴 function Component(props) { return ( {props.message} 이것은 함수로 만든 컴포넌트입니다. ); } ReactDOM.render( , d..

📌 JSX React.createElement의 표현식이며 문자도 html도 아닌 javascript의 확장 문법이다. JSX 문법으로 작성된 코드는 Babel이 순수한 javascript로 컴파일하여 사용한다. JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 📌 Babel 컴파일러로 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다. html과 javascript 사이를 왔다갔다 할 수 있는 장점이 있다. (JSX => Javascript) Babel · The compiler for next generation JavaScript The compiler for next generation..

📌 createElement React.createElement( type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment [props], // 리액트 컴포넌트에 넣어주는 데이터 객체 [...children] // 자식으로 넣어주는 요소들 ); 📌 태그 이름 문자열 type // type이 "태그 이름 문자열" 입니다. ReactDOM.render( React.createElement("h1", null, `type이 "태그 이름 문자열" 입니다.`), document.querySelector("#root") );​ 📌 리액트 컴포넌트 type // => => type이 "리액트 컴포넌트" 입니다. const Component = () => { return React.creat..

📌 DOM Document Object Model element는 우리 눈에 보이는 것이고, DOM은 브라우저가 이해하는 element의 원형이다. DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org 📌 2개의 핵심 모듈 - ES6방식인 import를 사용할 수 있는 이유 import를 이용한 구문들이 webpack이나 다른 bundler를 통해 변경 가능하기 때문이다. ReactDOM.render( , document.getElementById("hell..