Front

📌 Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로우며 비효율적일 수도 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다. Context – React A JavaScript library for building user interfaces ko.reactjs.org ❓그래서 context는 언..

Basic Hooks function 컴포넌트 사용하는 이유 - class는 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. - 복잡한 컴포넌트들은 이해하기 어렵다. - 사람과 기계를 혼동시킨다. - 컴파일 단계에서 코드를 최적화하기 어렵게 만든다. - this.state는 로직에서 레퍼런스를 공유하기 때문에 문제가 발생할 수 있다. 📌 useState 상태값을 관리해주는 훅으로 state를 대체할 수 있다. lazy initialize import React from "react"; export default function Example() { const [count, setCount] = React.useState(0); // 배열 return ( You Clicked {count} ti..

📌 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..