잡식성 개발자

List와 Key List 목록 Array (배열) : 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것. Key 각 객체나 아이템을 구분할 수 있는 고유한 값 아이템들을 구분하기 위한 고유한 문자열 여러개의 Component 렌더링 하기 map() 짝 지어주는 것 ReactDOM.render( {1} {2} {3} {4} {5} document.getElementById('root') ) const numbers = [1, 2, 3, 4, 5] const listItems = numbers.map((number) => {number} ) ReactDOM.render( {listItems}, document.getElementById('root') ) const doubled = numbers...

Event의 정의 및 Event 다루기 Event 특정 사건 예시 : 사용자가 버튼을 클릭한 사건 바인딩 사용하기 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: True }; // callback에서 `this`를 사용하기 위해서는 바인딩을 필수적으로 해줘야 합니다. this.handleClick = this.handleClick.bind(this); } // 바인딩 사용 handleClick() { this. setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this..

Hooks의 개념과 useState, useEffect Hook 갈고리 이름 앞에 use를 붙어야 함 useState state를 사용하기 위한 Hook import React, { useState } from "react"; function Counter(props) { var count = 0; return ( 총 {count}번 클릭했습니다. count++}> 클릭 ); } useState() 사용법 const [변수명, set함수명] = useState(초기값); import React, { useState } from "react"; function Counter(props) { const [count, setCount] = useState(0); // setCount : 변수 각각에 대해 se..

JSX의 정의와 역할 JSX의 정의 A syntax extension to Javascript 즉 자바스크립트의 확장 문법 자바스크립트 + XML/HTML 1 const element = Hello, world!; 역할 JSX는 내부적으로 XML 코드를 자스로 변환하는 과정을 거침 React.createElement( type, [props], [...children] ) JSX를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , document.getElementById('root') ); JSX를 사용하지 않은 코드 // JSX를 사용한 코드 cons..

섹션 2. 리액트 시작하기 index.html 잡식성 개발자 블로그에 오신 여러분을 환영합니다. 잡식성 개발자 블로그에 오신 여러분을 환영합니다. {/* DOM Conatiner(Root DOM Node) */} MyButton.js // MyButton.js function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', { onclick: () => setIsClicked(true) }, isClicked ? 'Clicked!' : 'Click here!' ) } const domContainer = doc..