[React] chapter_03

리액트 컴포넌트의 생명주기(라이프사이클) : 생성/수정
변수 정의 :  바인딩 변수 set변수명
사용법 : let [변수명, TODO:set변수명] = useState(초기값)
함수 정의 : 컴포넌트 생성 함수 : 자동 실행(또는 Mount함수라고 불림)

1) 생명주기 생성 함수(컴포넌트 생성) : 화면이 뜰 때 자동 실행
사용법 : useEffect(()=>{실행문}, []);

2) 생명주기 생성 -> 수정 함수 : 1) 생성 함수에 변수 값이 바뀔 때 자동 실행
사용법 : useEffect(()=>{실행문}, [감시할변수명]);

// TODO : 부모 컴포넌트 메인 : App.js

// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)

// TODO : 웹브라우저 확인(주소창) : http://localhost:3000

// TODO : 현재는 이미지 불필요하여 주석 처리

// import logo from "./logo.svg";

// TODO : App.css import (기본 : 중앙정렬)

import "./App.css";

// TODO : 자식 컴포넌트 가져오기(import)

import A_Lifecycle from "./pages/A_Lifecycle";

function App() {

  // TODO : 변수/함수를 정의하는 부분

  // TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임

  return (

    <div className="App">

      <h1>Start React 200!</h1>

      {/* TODO: 자식 컴포넌트 추가시 중복 부분 주석 처리 */}

      <A_Lifecycle></A_Lifecycle>

   

    </div>

  );

}

// TODO : 컴포넌트 내보내기(export)

export default App;

// TODO : 자식 컴포넌트 A_Lifecycle.js

// TODO : 리액트 컴포넌트의 생명주기(라이프사이클) : 생성/수정

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce

// TODO : import 함수 제대로 에러 확인 필수

import React, { useEffect, useState } from "react";

// 컴포넌트 : 함수 컴포넌트(클래스 컴포넌트(과거))

// es6 : ECMAscript == 모던자바스크립트

function A_Lifecycle() {

  // TODO : 변수 정의 : 바인딩 변수

  // TODO : 사용법 : let [변수명, TODO:set변수명] = useState(초기값)

  // TODO: set변수명이란 : set함수를 말하는건데, 사용시 set변수명을 작성해준다.

  // TODO: set변수명() : 수정함수(setter 함수)

  let [element, setElement] = useState(true);

  // TODO : 함수 정의

  // TODO : 컴포넌트 생성 함수 : 자동 실행(또는 Mount함수라고 불림)

  // TODO   1) 생명주기 생성 함수(컴포넌트 생성) : 화면이 뜰 때 자동 실행

  // TODO : 사용법 : useEffect(()=>{실행문}, []);

  useEffect(() => {

    // 최초 1번만 화면이 뜰 때 실행됨

    console.log("mount Call");

  }, []);

  // TODO 2) 생명주기 생성 -> 수정 함수 : 1) 생성 함수에 변수 값이 바뀔 때 자동 실행

  // TODO : 사용법 : useEffect(()=>{실행문}, [감시할변수명]);

  useEffect(() => {

    // 최초 1번만 화면이 뜰때 실행됨

    console.log("update Call : " + element);

  }, [element]);

  // 화살표 함수 단축키 : nfn

  // 클릭 함수

  const handleClick = () => {

    // element : true -> false (값 수정)

    setElement(false);

  };

  return (

    // 구조 : <div>HTML태그들</div>   (o)

    // 잘못된 구조 : <div>태그1</div><div>태그2</div> (x)

    <div>

      <h2>This is Lifecycle</h2>

      <button onClick={handleClick}>클릭하세요</button>

    </div>

  );

}

export default A_Lifecycle;

컴포넌트의 재사용의 효율: 값만 바꿔서 효율적인 코딩을 할 수 있음
props // ${매개변수.변수명}

// TODO : 부모 컴포넌트 메인 : App.js

// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)

// TODO : 웹브라우저 확인(주소창) : http://localhost:3000

// TODO : 현재는 이미지 불필요하여 주석 처리

// import logo from "./logo.svg";

// TODO : App.css import (기본 : 중앙정렬)

import "./App.css";

// TODO : 자식 컴포넌트 가져오기(import)

import E_Exam3 from "./pages/E_Exam3";

 

function App() {

  // TODO : 변수/함수를 정의하는 부분

  // TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임

  return (

    <div className="App">

      <h1>Start React 200!</h1>

      {/* TODO: 자식 컴포넌트 추가시 중복 부분 주석 처리 */}

       <E_Exam3 name="처음 만난 파이썬" numOfpage={300} />

      {/* TODO: 컴포넌트의 재사용의 효율: 값만 바꿔서 효율적인 코딩을 할 수 있음 */}

      <E_Exam3 name="처음 만난 자바" numOfpage={500} />

      <E_Exam3 name="처음 만난 js" numOfpage={200} />

    </div>

  );

}

// TODO : 컴포넌트 내보내기(export)

export default App;

// TODO : 자식 컴포넌트 연습문제 D_Exam2.js

// 연습문제

// 부모에서 데이터 전송 시 아래 결과와 같이 출력하세요(화면에 출력)

// 출력 : 이 책의 이름은 처음 만난 파이썬 입니다.

//        이 책의 총 300 페이지입니다.

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce

// TODO : import 함수 제대로 에러 확인 필수

import React from "react";

// 사용법 : props

//    ${매개변수.변수명}

function E_Exam3(props) {

  return (

    <div>

      <h1>{`이 책의 이름은 ${props.name} 입니다.`}</h1>

      <h2>{`이 책의 총 ${props.numOfpage} 페이지입니다.`}</h2>

    </div>

  );

}

export default E_Exam3;

 

실시간 국가별 현재 시간 출력
사용법 : toLocaleTimeString()
예시 : {new Date().toLocaleTimeString()}

// TODO : 부모 컴포넌트 메인 : App.js

// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)

// TODO : 웹브라우저 확인(주소창) : http://localhost:3000

 

// TODO : 현재는 이미지 불필요하여 주석 처리

// import logo from "./logo.svg";

 

// TODO : App.css import (기본 : 중앙정렬)

import "./App.css";

 

// TODO : 자식 컴포넌트 가져오기(import)

import F_Clock from "./pages/F_Clock";

 

function App() {

  // TODO : 변수/함수를 정의하는 부분

  // TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임

  return (

    <div className="App">

      <h1>Start React 200!</h1>

      {/* TODO: 자식 컴포넌트 추가시 중복 부분 주석 처리 */}

      <F_Clock />

    </div>

  );

}

 

// TODO : 컴포넌트 내보내기(export)

export default App;

// TODO : 자식 컴포넌트 F_Clock.js

 

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce

// TODO : import 함수 제대로 에러 확인 필수

 

import React from "react";

 

function F_Clock() {

  return (

    <div>

      <h1>안녕, 리액트</h1>

      <h2>

        현재 시간 :{/* toLocaleTimeString() : 국가별 현재 시간 출력 */}

        {new Date().toLocaleTimeString()}

      </h2>

    </div>

  );

}

 

export default F_Clock;