1205. react

스타터스 백엔드 3기 2022. 12. 5. 17:39

하루입니다.

FileTest.js,ConstructorTest.js,Book.js,EventComponent.js, EventComponent2.js,Loginform.js, Loop.js

variabletest.html - public에 만든다.

리뷰

html, css, js, jquery는 하나의 html 파일 안에서 유기적으로 움직일 수 있다.
제이쿼리는 자바스크립트의 라이브러리, 리액트는 자바스크립트의 프레임워크이다.
라이브러리는 남이 구현한 코드를 필요하면 가져다 쓰는 것.
프레임워크는 형식에 맞게 사용해야 한다. 규칙을 지켜야 한다.
리액트 : index.html을 통해 화면이 보여진다. index.js에서 리액트 컴포넌트를 모은다.
만약 리액트를 하고 싶다면 처음부터 방향을 잡고 시작해야 한다.
또한 리액트에서는 jquery 등장할 일이 없다. jquery는 dom을 제어하고 이벤트를 처리하기 때문이다. 리액트는 html을 리턴하는 게 아닌 jsx를 리턴하기에 dom이 없다. 글고 리액트는 미리 태그를 만들고, 변수 값만 바꾸는 식으로 진행한다.
node 서버 중단하고 싶으면 ctrl C 누르면 된다.

JSX

jsx는 JS의 확장된 문법이지만 브라우저가 바로 실행 가능한 코드는 아니기에 Babel(컴파일러)을 사용해서 브라우저가 이해할 수 있는코드로 변환시킨다.
React.createElement의 매개변수로 활용된다.

컴포넌트

리액트는 화살표함수를 좋아한다.
유명함수, 무명함수(화살표함수), Class

유명함수	화살표함수	클래스
function A () { return (<div> ... </div>); }	const A = () => { return (<div> ... </div>); }	class A extends React.Component { render() { return (<div> ... </div>); } }
매개변수 받을 때는 매개변수명 param, p, props 등 ... 상관 없다.		props라는 이름으로 데이터를 받아야 한다. this 사용한다.

시험

내일 15개 사지선다

과제 1개

과제 2개 (도전과제)

반드시 시간 안에 제출해야 함

리액트 컴포넌트를 외부파일에서 사용하기

class ConstructorTest extends React.Component { }	class ConstructorTest extends React.Component { }
export default A	export {B}
import A from './FileTest'	import {B} from './FileTest'
import A, { B, C } from './FileTest'; 와 같은 형태 많이 사용한다.

내가 만든 컴포넌트는 A인데, 외부에서 사용할 때는 B로 사용해도 된다는 뜻이다. as는 Alias의 약어로 별명이라는 뜻.

A의 기본적인 이름은 A지만, B로도 사용 가능하다.

오늘은 class C extends React.Component { } 위주로 배운다.

class는 변수, 함수, 메소드 등을 정의 가능하다.
React.Component를 상속했을 때 자동으로 포함되는 메소드가 있다.
상속 자동 포함 메소드 1. render() - 화면 렌더링 요소 정의, 매개변수 없다.
상속 자동 포함 메소드 2. constructor(props) - <컴포넌트 />가 생성될 때 호출되며, <컴포넌트 />를 저장한다.
초기 변수 정의가 가능하며, props라는 매개변수를 받는다.

// react class component의 뼈대

import React from "react";
class Book extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div></div>);
    }
}

export default Book;

constructor 밖에서 선언한 변수는 현재 객체의 모든 함수에서 사용 가능하다.
constructor 안에서 선언한 this.변수는 현재 객체의 모든 함수에서 사용 가능하다.
render() {} 내부에서 변수 사용하고 싶다면 반드시 this 붙여야 한다. 그냥 title이라고 하면 render()의 타이틀인지 뭔지 모르기 때문이다.
props는 객체 타입이다. props = {writer:"작성자", page:1, ...}

import React from "react";

class ConstructorTest extends React.Component {
    title = "제목";          	      // 현재 객체의 모든 함수에서 사용
    constructor(props) {    	      // 반드시 props로 받아야 한다.
        super(props);                 // 부모의 생성자를 호출 (반드시 맨 앞)
                                      // 부모객체에 props라는 변수를 전달한다는 뜻이다.
        this.contents = "내용";       // 현재 객체의 모든 함수에서 사용
        a = "이얍"		      // 지역변수라 render에서 사용 불가
    }

    render() {
        this.props.writer = "작성자 변경"
        return(<div>{this.title}, {this.contents}, {this.props.writer}</div>);  
    }
}

export default ConstructorTest;

내가 부모?

<React.StrictMode>

</React.StrictMode>

);

내가 자식?

class ConstructorTest extends React.Component

호출한 쪽이 부모, 당한 쪽이 자식. props로 writer라는 값을 전달하고 싶다. props 안의 writer를 사용할 건데, 이 props는 생성자 안에 있으니까 this. 를 사용하는 것이다.
부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다.
props는 단방향 데이터라서 수정 불가하다.

render() {

this.props.writer = "작성자 변경"

return(<div>{this.title}, {this.contents}, {this.props.writer}</div>);

}

Uncaught TypeError: Cannot assign to read only property 'writer' of object '#<Object>'

리액트 컴포넌트 내부 함수 실행 순서

constructor(){}	render(){}
먼저 실행된다.	뒤에 실행된다.
한 번 실행된다.	props나 변수값이 변경될 때마다 호출된다.
리액트 컴포넌트 전체에서 사용할 변수를 선언한다. 부모에서 전달받은 변수를 초기화 해야 하기에 첫 문장이 super(props);이다. state 변수를 선언한다.

항상 마지막줄의 reportWebVitals();가 실수한 거 없나 한 번 더 실행한다. 그래서 constructor(){}와 render(){}가 두 번씩 실행된다.
클래스 라는 건 객체의 틀을 만드는 것이다. ConstructorTest 클래스가 React.Component를 상속받았다.

thisthisthisthisthisthisthisthisthisthis!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

props 문법

import React from "react";
class Book extends React.Component {

    constructor(props) {
        super(props);
        this.title = "제목: " + props.title;		// this. 사용
    }

    render() {
        const body = "내용: " + this.props.body;		// render 내에서 선언 후 this.props.body;
        const price = "가격: " + this.props.price + "원";	// render 내에서 선언 후 this.props.body;
        return (<div><h2>오늘 구입한 책 목록</h2>
            <h3>{this.title}</h3>
            <h3>{body}</h3>
            <h3>{price}</h3><br /></div>);
            {/* {this.props.price}<br /></div>); */}
    }
}

export default Book;

위의 식을 아래와 같이 나타낼 수 있다.

제목과 내용을 따로 전달받아서 class Book에서 return 할 것이다.
BookHeading class는 생성자 없이 props에서 바로 데이터를 받아서 사용할 것이다.
BookBody는 생성자에서 전역변수를 만들고 값을 담은 뒤, render() 에서 전역변수를 사용할 것이다.

[index.js ]
root.render(
  <React.StrictMode>
    <Book title="리액트" body="리액트 책입니다." price="40000"/>
    <Book title="스프링" body="mvc와 스프링부트도 다룹니다."  price="30000"/>
    <Book title="마리아DB" body="오라클 mysql mariaDB와 비교합니다."  price="20000"/>
  </React.StrictMode>
);

--------------------------------------------------------------------------------------------

[Book.js]
import React from "react";
class BookHeading extends React.Component {
    render() {
        return (<h1>제목 : {this.props.title}</h1>);
    }
}

class BookBody extends React.Component {
    constructor(props) {
        super(props);
        this.body = "내용: " + this.props.body;
        this.price = "가격: " + this.props.price + "원";
    }

    render() {
        return (
            <div>
                <hr />
                <h2>{this.body}</h2>
                <h2>{this.price}</h2>
            </div>);
    }
}

class Book extends React.Component {
    render() {
        return (
        <div>
            <BookHeading title = {this.props.title} />  {/*내가 전달받은 props의 title을 전달한다.*/}
            <BookBody body = {this.props.body} price = {this.props.price * 2}/>
        </div>);
    }
}

export default Book;

props 문법 2

비구조화 할당 문법 / 변수 분해 / 구조분해 할당
배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다.
public에 variabletest.html을 생성했다.
[... ] {... } 스프레드 연산자 : 복사본을 만든다.

let arr1 = [1, 2, 3, 4, 5];	let arr1 = [1, 2, 3, 4, 5];
let newarr1 = arr1;	let newarr1 = [...arr1];
console.log(arr1 + " : " + newarr1 + "==>비교");
100,2,3,4,5 : 100,2,3,4,5	1,2,3,4,5 : 100,2,3,4,5
같은 메모리 영역을 공유한다.	새로운 메모리를 만든다? 공유되지 않는다.

    let arr1 = [1, 2, 3, 4, 5];
    let newarr1 = [...arr1];     
    newarr1[0] = 100;     
    console.log(arr1 + " : " + newarr1 + " ==>비교");

    let obj1 = {seq:1, title:"제목", contents:"내용"}
    let newobj1 = {...obj1}
    newobj1.seq = 2;
    console.log(obj1.seq + " : " + newobj1.seq + " ==>비교" );

class Book extends React.Component {
    render() {
        return (
        <div>
            <BookHeading title = {this.props.title} />  {/*내가 전달받은 props의 title을 전달한다.*/}
            <BookBody body = {this.props.body} price = {this.props.price * 2}/>
        </div>);
    }
}

--------------------------------------------------------------------

// 비구조화 할당 문법
class Book extends React.Component {
    render() {
        const {title, body, price} = this.props;
        return (
        <div>
            <BookHeading title = {title} /> 
            <BookBody body = {body} price = {price * 2}/>
        </div>);
    }
}

props 문법 3. 반복문

map함수 : 매개변수로 함수가 들어간다.

(보고만 넘어감)

state

class형으로 사용하는 것과 함수형으로 사용하는 것의 차이가 크다.

리액트 컴포넌트의 게시판 리스트 조회, 추가, 수정, 삭제하기
하는데 메모리 내에서는 바뀌는데 보여주지를 않는다. 렌더링을 안 해 준다. 이제 value를 렌더링 해야 한다고 선언해야 한다.

props 변수는 읽기 전용 객체이다. 내부 변수값 변경 불가하다.
리액트에서 이벤트 처리할 때는 인라인 방식을 쓰되 on 두ㅠㅣ에 대문자로 시작하는 이벤트명ㅇ르 붙인다. 이벤트 함수는 화살표 함수로 사용하는 것을 지향하자.
만약 유명함수를 사용할 경우, clickHandler = () => {this.setState({value : this.state.value + 1, name : '이벤트 처리 중'}); } 여기서 this는 EventComponent1이 아닌 자신을 호출한 button이 된다. 애매모호함 때문에 유명함수가 아닌 화살표함수를 사용하는 것을 지향하자.
setState()는 state의 setter 용도로 사용된다.

render() {} 함수 안에 있어서 호출할 때 this 안 붙여도 된다.

해야 하는 것

root.render(
  <React.StrictMode>
    <EventComponent1 name = "리액트 이벤트 처리" />
  </React.StrictMode>
);

import React from "react";

class EventComponent1 extends React.Component {
    state = {value : 0, name : this.props.name}
    render() {
        const clickHandler = () => {   
            this.setState({value : this.state.value + 1, name : '이벤트 처리 중'});   
        }
        return (
            <div>
                <div>{this.state.value} - {this.state.name}</div>
                <button onClick={clickHandler}>Click Button</button>
                <div>전달받은 name = {this.state.name}</div>       
            </div>
        ) // return
    } // render
} // class

export default EventComponent1;

    clickHandler = () => {    // 렌더함수 안의 지역함수이면서 화살표함수
        this.setState({value : this.state.value + 1, name : '이벤트 처리 중'});     // 왼쪽은 바꿀 변수 이름, 오른쪽은 변경할 값(this.state.value).
    }
    render() {
        return (
            <div>
                <div>{this.state.value} - {this.state.name}</div>
                <button onClick={this.clickHandler}>Click Button</button>
                <div>전달받은 name = {this.state.name}</div>        {/*전달받은 props를 바꿔보자. 
                맨 처음에 받아와서 state = {name : this.props.name} 여기서 조회하고, 후에 바꾼다 (??)*/}
            </div>
        ) // return
    } // render
} // class

함수로 컴포넌트 선언하기

리액트 컴포넌트 상속 안 받았는데

로그인하기

아이디와 패스워드가 입력될 때마다 수행하는 벼수를 ㄴtate로 선언한다. 생성자 밖에서 선언하면 state={}, 생성자 안에서 선언하면 this.state = {}로 선언해야 한다. this 안 붙이면 지역변수라고 생각하기 때문이다.

그런데 dom 구조도 아닌데 입력된 값을 어떻게 가지고 오지? onChange={}를 사용하자. 값이 입력될 때마다 값을 불러오기 위한 거싱다.

아이디, 비밀번호, 버튼, 결과 도출 창을 만든다. 버튼을 누르면 아이디와 비밀번호를 창에 띄우는 것이 목적이다.

import React from "react";

class EventComponent1 extends React.Component {
    // state.value = 0; 아래와 같은 형태 많이 사용한다.
    // state 객체와 setState라는 함수는 이벤트 컴포넌트 안에 자동으로 포함되어 있다. 그걸 재정의한다 우리가.
    // statㄷ 안에 어떤 변수를 넣을 거고, setstate에서 변수를 어떻게 변경할 건지만 정의하면 알아서 변한다.
    state = {value : 0, name : this.props.name}
//  state = {value : 0, {name} : this.props}        같은 뜻이다?
    // 함수 여기 선언 가능, 클래스 메소드이며 유명 함수 / 화살표 함수이다.
    // clickHandler() {}                이건 지양하자
    // clickHandler = () => {}          밖에 적더라도 화살표함수를 사용하자

    // 함수 여기 선언 가능, render() {}의 지역함수면서도 화살표함수이다. 많이 사용함.
    // 가능하면 render() 안에 화살표함수로 사용하자.
    clickHandler = () => {    // 렌더함수 안의 지역함수이면서 화살표함수
        this.setState({value : this.state.value + 1, name : '이벤트 처리 중'});     // 왼쪽은 바꿀 변수 이름, 오른쪽은 변경할 값(this.state.value).
    }
    render() {
        return (
            <div>
                <div>{this.state.value} - {this.state.name}</div>
                <button onClick={this.clickHandler}>Click Button</button>
                <div>전달받은 name = {this.state.name}</div>        {/*전달받은 props를 바꿔보자. 
                맨 처음에 받아와서 state = {name : this.props.name} 여기서 조회하고, 후에 바꾼다 (??)*/}
            </div>
        ) // return
    } // render
} // class

export default EventComponent1;

리액트의 반복문

map 함수 사용한다.

const loop = this.userList.map(function() {}); 배열에 포함된 함수로, 반복해준다.

'스타터스 백엔드 3기' 카테고리의 다른 글

제이쿼리 $("#box-list").html() 내부의 let title = $("#title").val()이 선택되지 않는 건에 대하여 (0)	2022.12.07
221207 - 자바(개요, 변수, 연산자, 조건문과 반복문) (0)	2022.12.07
!!!!!! 왜 int j = i --;와 int j = --i; 가 다른지 이해했다!!!!! (1)	2022.12.04
유데미 스타터스 취업 부트캠프 3기 - 백엔드 2주차 (0)	2022.12.02
221202. react.js, VSCode, node.js (1)	2022.12.02

ABOUT ME

하루 하루

리뷰

JSX

컴포넌트

리액트 컴포넌트를 외부파일에서 사용하기

오늘은 class C extends React.Component { } 위주로 배운다.

리액트 컴포넌트 내부 함수 실행 순서

thisthisthisthisthisthisthisthisthisthis!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

props 문법

props 문법 2

props 문법 3. 반복문

state

class형으로 사용하는 것과 함수형으로 사용하는 것의 차이가 크다.

로그인하기

리액트의 반복문

'스타터스 백엔드 3기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

리뷰

JSX

컴포넌트

리액트 컴포넌트를 외부파일에서 사용하기

오늘은 class C extends React.Component { } 위주로 배운다.

리액트 컴포넌트 내부 함수 실행 순서

thisthisthisthisthisthisthisthisthisthis!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

props 문법

props 문법 2

props 문법 3. 반복문

state

class형으로 사용하는 것과 함수형으로 사용하는 것의 차이가 크다.

로그인하기

리액트의 반복문

'스타터스 백엔드 3기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바