Tech/React13 React Element vs Component Element React에서 Element는 React 애플리케이션을 가장 작은 단위의 구성 요소이다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. Element는 immutable하다. 보통 Component에서 Element를 반환한다. Component React에서 Component는 function혹은 class이며, props와 state를 가질 수 있다. 즉, Component는 props를 전달받아 Element를 출력하는 함수이다. https://reactjs.org/docs/rendering-elements.html Rendering Elements – React A JavaScript library for building user interfaces re.. 2021. 8. 1. useEffect 정리 Effect Hook을 사용하면 컴포넌트에서 side effect를 수행할 수 있다. 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects다. 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우이다. Class 리액트의 class 컴포넌트에서 render 메서드 그 자체는 side effect를 발생시키지 않는다. DOM을 업데이트하고 난 이후에 effect를 수행한다. 리액트 class에서 side effect를 componentDidMount.. 2021. 7. 22. [Typescript] CRA에서 http-proxy-middleware 사용법 React에서 상대경로에 대해 프록시를 통해서 Origin을 바꿔서 보낼 수 있다. 상대경로는 package.json의 옵션으로도 설정할 수 있지만, 오늘은 CRA 공식 홈페이지에서 소개하고 있는 http-proxy-middleware 에 대해 알아보자. CRA에는 아래 파일만 src 폴더 하위에 생성만 하더라도 알아서 프록시 설정 다 해준다. // src/setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOr.. 2021. 7. 14. ReactNode vs ReactElement vs JSX.Element render() render() 메소드는 class component에서만 필수적으로 필요하다. render() 메소드가 호출되면 this.props와 this.state를 활용해서 아래 타입 중 하나를 반환한다. React elements: JSX를 통해 생성된다. 그 예시로 와 는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트이다. Arrays and fragments: render()를 통해서 여러 개의 element들을 반환한다. Portals: 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 하게 해준다. String and numbers: 이 값들은 DOM 상에 텍스트 노드로서 렌더링된다. Booleans or null: 아무것도 렌더링하지 않.. 2021. 7. 7. react 리뷰 정리 1. 제어 컴포넌트를 권장한다는 의미는 비제어 컴포넌트로 구현이 가능하더라도 제어 컴포넌트를 권장한다는 말이다. 컴포넌트가 데이터(상태)를 명확히 알고 관리하고 있을 때 밸리데이션을 추가하기도 쉽고 여러모로 컴포넌트의 동작이 더욱 쉽게 예측 가능해 진다. onSubmit(event) { event.preventDefault(); const payment = Number(event.target.elements["purchase-input"].value); 제어 컴포넌트를 쓰면 위 코드 부분이 더욱 간결해질 수 있다. onSubmit 뿐만 아니라 다른 메서드에서 payment 값이 필요 할 수도 있는데 이에 대응하기도 쉬워진다. 2. Context API와 같은 event bus가 필요한 프로젝트인가? 항상.. 2021. 6. 15. React component Component 란? 하드웨어는 각각의 독립된 기능을 가진 모듈들로 만들어진다. 하지만, 소프트웨어는 종속적인 경우가 많고 다른 모듈과의 호환성도 고려하지 않고 개발하는 경우가 많다. 이런 상황에서 재사용의 중요성과 필요성을 위해 나온 패턴이 컴포넌트 패턴이다. 1. 컴포넌트는 독립적인 소프트웨어 모듈이다. 컴포넌트는 독립적인 기능을 수행하는 모듈로서 이후 다른 모듈로 대체 가능하다. 2. 컴포넌트는 구현, 명세화, 패키지화 그리고 배포될 수 있어야 한다. - 소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 구현(implementation)이 완료되어 있어야 한다. - 컴포넌트의 용도, 유형, 기술 표준과 인터페이스 등에 대한 정보들에 대해서 명세화(specification)되어 있어야만 한다. .. 2021. 5. 29. 이전 1 2 3 다음
