one Book a Day

4. 이벤트 핸들링 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 event라 함. 1. 리액트의 이벤트 시스템 HTML 이벤트와 인터페이스가 동일하다. const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요"); const onClickLeave = () => setMessage("안녕히 가세요!"); const [color, setColor] = useState("black"); return ( 입장 퇴장 주의점 이벤트는 카멜케이스로 작성한다.(onclick -> onClick) 이벤트에 실행할 JS 코드가 아니라 함수형태의 값을 전달. HTML은 큰따..

존경하는 김민준 개발자님의 저서를 읽고 정리했습니다. 컴포넌트 컴포넌트의 기능은 단순 템플릿 이상이다. data가 주어졌을 때 이에 맞추어 UI를 만들어 줌, 라이프사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있습니다. 클래스형 컴포넌트 클래스는 state및 라이프사이클 기능 사용가능, 임의 메서드 작성 가능. JS의 클래스는 ES6에서 생김. 그전에는 prototype을 사용해야했음. render함수 안에서 보여주어야 할 JSX를 반환해야함. 함수형 컴포넌트 선언하기 편하고 메모리 자원도 클래스형보다 덜 사용한다. 빌드 후 배포할때도 함수형 컴포넌트를 사용하는 것이 파일 크기가 더 작다. (별 차이 없긴..

김민준(velopert)님의 리액트를 다루는 기술 2장을 읽고 정리하였습니다. JSX import React from 'react'; node_modules 디렉터리의 react 모듈을 import를 통해 불러와서 사용할 수 있게한다. 모듈을 불러와서 사용하는 것은 원래 브라우저(2017이전)에는 없던 기능.(Node.js에서 지원하는 기능(require)) 지금도 브라우저는단순 js만 불러오는 용도. 프로젝트 번들링은 불가능. 이러한 기능을 브라우저에서 사용하기위해 bundler를 사용(코드를 묶는다) Webpack, Parcel, browserify... react는 편의성과 확장성이 뛰어난 Webpack을 주로 사용. 번들러는 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을..

돔(Document Object Model) = 구조화된 텍스트 그러므로 HTML은 단순 텍스트일지라도 돔은 메모리에 값을 가지고 있는 표현식이다. ex)하나의 프로그램에 다수의 프로세스 -> 하나의 페이지에 여러개의 탭, 하나의 HTML안에 다수의DOM HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다.(DOM Tree의 노드) 돔은 getElementById 혹은 removeChild와 같은 메소드를 포함한다. 우리는 웹 페이지의 컨텐츠를 동적으로 수정하고 싶을 때 DOM을 수정한다. var item = document.getElementById("My") item.parentNode.removeChild(item); document는 root node의 추상화된 개념인 반면에 g..

React 엘리먼트 : React의 최소단위 일반 객체 React DOM은 React 엘리먼트와 브라우저의 DOM을 일치시킬 수 있도록 업데이트 한다.(핵심기능) 보통 React로 구현된 App은 하나의 Root DOM Node를 가진다. (여러기능 통합한 경우 독립된 많은 수의 Root DOM Node를 가질 수도 있음) Root DOM Node를 선언하고 내부 엘리먼트들은 직접작성이 아닌 React에의해 Control되게 설계해야한다. const a = hi! React; ReactDOM.render(a, document.getElementById('root')); JS에서는 변수선언에 태그가 들어갈 수 없음. JSX문법.(일반객체에 엘리먼트를 담을 수 있다.) ReactDOM.render()을 사용..

React component의 render 함수 return값은 jsx 문법을 쓰게 되는데 여기서 컴포넌트들은 반드시 하나의 DOM 트리구조를 가져야한다. virtual DOM 에서 컴포넌트 변화를 감지 하기 위해서이고 이를위해 최상위 태그를 꼭 하나 써줘야 한다. 예전에는 태그 혹은 섹션태그(header,nav,footer 등)를 이용해서 감쌌었으나 react는 Fragment를 지원하는데 이는 의미없는 div의 남발을 막기위해서이다. (그치만 styling할때 다시 div태그로 바꾸는 일도 허다..) 혹은 로 사용하며 (이상하게 내 vs-code에서는 가 적용이 안됨..) 최종적으로 렌더링되어 웹 브라우저에 나타나는 코드에서는 보이지 않는다.

jsconfig.json만들고 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 붙혀넣고 저장. 출처:https://create-react-app.dev/docs/importing-a-component/ Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 공식문서

위 그림은 React 컴포넌트의 생성부터 삭제까지의 동작 과정이며 방법론이다. render()를 제외하고 크게 세가지로 나뉜다. 1.Mounting(생성) 2.Updating(수정) 3.Unmounting(죽음) Mounting는 DOM이 생성되고 웹에 component가 나타나는 로직인데 컴포넌트가 생성되면 constructor가 호출되어 클래스 기본값을 설정하고 -componentWillmount(): 컴포넌트 UI 렌더링 전 호출 -render(): 컴포넌트 UI 렌더링 -componentDidMount(): 컴포넌트가 브라우저 위에 나타난 후 호출 순서로 진행된다. Updating은 -props변경 -state변경 -부모 컴포넌트 리렌더링 -this.forceUpdate()실행 시 이루어지며(re..