김수정 블로그 김수정 블로그

import './App.css'; import {useState} from 'react'; function Header(props){ return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } function Nav(props){ const lis = [] for(let i=0;i{t.title} ) } return {lis} } function Article(props){ return {props.title} {props.body} } function Create(props){ return Create { event.preventDefault(); const title = event.target.title.value; const..

- 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props) { return Hello, {props.name}; } class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } - 컴포넌트 생명주기 메서드 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드 작동 componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행 componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } Mouting : Dom이생성되고 웹 브라우저상에 나타나..

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 React 설치 수정 배포 1. 개발환경 세팅 1) https://ko.reactjs.org/ 2) 우측 새로운 React 앱 만들기 3) 추천 툴체인 - Create React App -> create-react-app site 이동 (creae-react-app을 사용하려면 node.js가 설치되어 있어야 한다. node.js 설치하면 터미널에서 npx 라는 명령어를 사용할 수 있게 된다.) 터미널 명령어로 실행 4) npx create-react-app . (.은 현재 디렉토리를 의미) 5) npm start (create react app을 구동) 2. 소스 코드 수정 방법 1) src>ind..

useEffect(function, deps) function ; 수행하고자 하는 작업 deps : 배열 형태, 배열 안에는 검사하고자 하는 특정 값 , or 빈 배열 import Button from "./Button"; import styles from "./App.module.css"; import { useState, useEffect } from "react"; function App(){ const[counter,setValue] = useState(0); const[keyword,setKeyWord] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyWord(e..