🍞 Front-End

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다. 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..