TIL 2022-12-30

JYR00·2022년 12월 30일
0

TIL

목록 보기
52/60

java505_react_test2 프로젝트 생성


이런거 markup language로 만드거임



파일명이랑 프로젝트명 다르면 package.json에 name 변경해줘야한다

JSX -> 함수형 클래스형 두 가지로 나뉘는데 우리는 함수형으로 진행할 예정


index.html root - > potato로 바꾸면 아무것도 뜨지 않는다




이렇게 오류가 난다.

potato.jsx생성



화면 구성 차이점 앞이 SPRING 뒤가 리엑트
자바스크립트를 사용하면서 이용한다.

function Movie(){
    return(
        <h2>나는 감자가 조아</h2>
    );
}






function App() {
  //  이곳은 일반적인 js 소스코드 부분



    //return 화면을 생성하는 가상 DOM 부분 (virtual dom)
    return (
        //부모 태그는 반드시 한 개만 존재해야 함 (자식태그는 상관없음)
        //jsx 문법에서 class라는 키워드는 자바 스크립트의 클래스 키워드와 겹치기 때문에
        //자바스크립트의 클래스와 css 선택자의 클래스를 구별을 해주기 위해서
        //css선택자인 class를 className으로 사용한다
        <div className="App">
        {/*    SPA: Single Page Application 의 줄임말, (spring은 multipage application)
                index.html와 같은 하나의 화면 구성 파일로 모든 화면을 구성하는 웹 페이지*/}
        {/*    SPA는 프론트엔드 프레임워크를 사용하여 하나의 화면에서 필요한 부분을 실시간으로 변경하여
                웹을 표시한다. 해당 화면을 구성하는 요소를 컴포넌트라고 한다.*/}
        {/*    컴포넌트 : 리엑트에서 화면을 구성하는 요소*/}

        <h2>리액트 사용하기</h2>
        <Movie/>
        <Movie/>
        </div>

function 이름 바뀌어도 잘 작동된다


리엑트에서 dom개념 설명해 놓은 블로그
https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

<Food fav = {"kimchi"} something={true} papapapa={['hello',1,2,3,4,true]} ></Food>


이렇게 콘솔창에 뜬다


import './App.css';
// import Potatao from "./Potatao";
// 반드시 경로명을 적어야 한다


// 이렇게 한 파일에서 function을 만들어 넣어도 된다
// props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매개변수
// props는 읽기 전용 
function Food(props){
    const some = props.something;
    console.log(props);
    return(
        <h2>I love {props.fav}</h2>
    );
}


function App() {
  //  이곳은 일반적인 js 소스코드 부분



    //return 화면을 생성하는 가상 DOM 부분 (virtual dom)
    return (
        //부모 태그는 반드시 한 개만 존재해야 함 (자식태그는 상관없음)
        //jsx 문법에서 class라는 키워드는 자바 스크립트의 클래스 키워드와 겹치기 때문에
        //자바스크립트의 클래스와 css 선택자의 클래스를 구별을 해주기 위해서
        //css선택자인 class를 className으로 사용한다

        
        
        
        
        <div className="App">
        {/*    SPA: Single Page Application 의 줄임말, (spring은 multipage application)
                index.html와 같은 하나의 화면 구성 파일로 모든 화면을 구성하는 웹 페이지*/}
        {/*    SPA는 프론트엔드 프레임워크를 사용하여 하나의 화면에서 필요한 부분을 실시간으로 변경하여
                웹을 표시한다. 해당 화면을 구성하는 요소를 컴포넌트라고 한다.*/}
        {/*    컴포넌트 : 리엑트에서 화면을 구성하는 요소*/}

            {/* {Food라는 컴포넌트에 변수명이 kimchi인 데이터를 전달한다}*/}

            {/*{}를 사용해야만 데이터가 전달이 된다 그냥 다 감싸 */}
            <Food fav = {"kimchi"} something={true} papapapa={['hello',1,2,3,4,true]} ></Food>
            <Food fav={"돈까스"}/>
            <Food fav={"햄버거"}/>
            <Food fav={"스시"}/>
            <h2>리액트 사용하기</h2>
            {/*    함수안에 들어있는 정보를 화면에 뿌려준다*/}

        </div>

    //    오로지 div 안에서만 구성해야 한다
    );
}
// return 화면 렌더링 - 무조건 한 개의 html태그만 사용한다
// 주로 <div>로 부모태그만들고 안에 화면을 그린다. return 뒤에 있는 ()는 구분하는 용도. 어디서부터 어디까지 return 되는지 헷갈리니까
// 안 붙여도 괜찮지만 붙이는 것이 더 바람직하다. (한 줄 이상 될 경우)


//export에 default가 붙어있다면 다른 곳에서 import할 때 {}를 붙여야하는데 안 붙이고 바로 호출하는 것이 가능하다
export default App;


이런 형태로 props사용해도 된다

컴포넌트와 props는 꼭 기억해야한다!

import './App.css';
// import Potatao from "./Potatao";
// 반드시 경로명을 적어야 한다


// 이렇게 한 파일에서 function을 만들어 넣어도 된다
// props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매개변수
// props는 읽기 전용 
//  사용법 :
// 1) 컴포넌트 명(props){
//  {props.부모가 전달한 키 이름}
// }

// 2) 컴포넌트 명({부모가 전달한 키 이름, ...}) {
//  {키 이름1}, {키 이름2}, ...
//  console.log({키이름1});
// }

// 3) 컴포넌트명(props){
//      const {키이름, ...} = props;
//      console.log({키이름});
// }



// 1번
// function Food(props){
//     const some = props.something;
//     console.log(props);
//     return(
//         <h2>I love {props.fav}</h2>
//     );
// }


// 2번
function Food({name, pic}){
    // const some = name.something;
    // console.log(name);
    return(
        <div>
            <h2>I love {name}</h2>
            <img src={pic}/>
        </div>

    );
}


// 3번
// function Food(props){
//     const some = props.something;
//     console.log(props);
//     return(
//         <h2>I love {props.fav}</h2>
//     );
// }



// 새로운 예제
const foodList = [
    {
        name: "돈까스",
        image : "https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/" +
            "service/user/3YN/image/XIsief9ks0Re5EL1N87ztiBfaok.jpg"
    },
    {
        name :"순대국밥",
        image: "data:image/jpeg;base64,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" +
            "1NbmozXDGRW4ArRNbilONorEVkV6uOoxFYismtaNgo9HWsRXq9RCYmsE141rXAM1msVmgAyK9Na140" +
            "TjYVhS+VeO1aCuONhWaxWze9EB//2Q=="
    },
    {
        name : "햄버거",
        image: "data:image/jpeg;base64,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" +
            "s6DTKjBdBHqar6mcwvYvBp/ucx/4mZvoTH0pxguG2rX+ztW0/yIq/kKt15TqEVhFcqknlnte0UUwoUUUUAFFFFABRRRQAUUUUAf/Z"
    }
];



function App() {
  //  이곳은 일반적인 js 소스코드 부분 
  //  원래 이렇게 넣어야 했다
  //   foodList.map(function(dish:{image,name}){
  //       <Food name={dish.name}/>
  //   });




    //return 화면을 생성하는 가상 DOM 부분 (virtual dom)
    return (
        //부모 태그는 반드시 한 개만 존재해야 함 (자식태그는 상관없음)
        //jsx 문법에서 class라는 키워드는 자바 스크립트의 클래스 키워드와 겹치기 때문에
        //자바스크립트의 클래스와 css 선택자의 클래스를 구별을 해주기 위해서
        //css선택자인 class를 className으로 사용한다


        
        
        
        <div className="App">
            {/*    SPA: Single Page Application 의 줄임말, (spring은 multipage application)
                index.html와 같은 하나의 화면 구성 파일로 모든 화면을 구성하는 웹 페이지*/}
            {/*    SPA는 프론트엔드 프레임워크를 사용하여 하나의 화면에서 필요한 부분을 실시간으로 변경하여
                웹을 표시한다. 해당 화면을 구성하는 요소를 컴포넌트라고 한다.*/}
            {/*    컴포넌트 : 리엑트에서 화면을 구성하는 요소*/}

            {/*{} : jsx 문법에서 {}데이터를 표현하는 데 사용함, 간단한 연산식도 사용가능*/}

            {/* {Food라는 컴포넌트에 변수명이 kimchi인 데이터를 전달한다}*/}

            {/*{}를 사용해야만 데이터가 전달이 된다 그냥 다 감싸 */}

            {foodList.map(dish => <Food name = {dish.name} pic={dish.image}/>)}

            {/*<Food fav = {"kimchi"} something={true} papapapa={['hello',1,2,3,4,true]} ></Food>*/}
            {/*<Food fav={"돈까스"}/>*/}
            {/*<Food fav={"햄버거"}/>*/}
            {/*<Food fav={"스시"}/>*/}
            <h2>리액트 사용하기</h2>
            {/*    함수안에 들어있는 정보를 화면에 뿌려준다*/}

        </div>

    //    오로지 div 안에서만 구성해야 한다
    );
}
// return 화면 렌더링 - 무조건 한 개의 html태그만 사용한다
// 주로 <div>로 부모태그만들고 안에 화면을 그린다. return 뒤에 있는 ()는 구분하는 용도. 어디서부터 어디까지 return 되는지 헷갈리니까
// 안 붙여도 괜찮지만 붙이는 것이 더 바람직하다. (한 줄 이상 될 경우)


//export에 default가 붙어있다면 다른 곳에서 import할 때 {}를 붙여야하는데 안 붙이고 바로 호출하는 것이 가능하다
export default App;


unique key값이 없기 때문에 오류



prop-type 설치해야 한다. 터미널에다 쳐야함
npm install prop-types


삿갓 표시는 이 숫자 이상이면 잘 작동된다는 의미다

Food.propTypes = {
    name : PropTypes.string.isRequired, //값 안들어오면 오류체크하라는 의미
    pic : PropTypes.string.isRequired,
    rating : PropTypes.string.isRequired
};


데이터형이 맞지 않다고 뜸



Food.propTypes = {
    name : PropTypes.string.isRequired, //값 안들어오면 오류체크하라는 의미
    img : PropTypes.string.isRequired,
    rating : PropTypes.number.isRequired
};

변수 이름이 달라지면 틀렸다고 알려줌
원래 pic인데 img로 바꾸어보았다


State

ppt 5장

App2.jsx생성
클래스로 import하는 방법



constructor(props) {
        super(props);
        console.log('생성자 실행');
    }
    componentDidMount() {
        console.log('컴포넌트 생성 완료')
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("컴포넌트 업데이트 완료")
    }
    componentWillUnmount() {
        console.log('컴포넌트 제거 완료')
    }

+버튼 누르면

마이너스 버튼 누르면


App2.jsx 최종

import React from "react";

// 클래스 타입의 컴포넌트 (요즘 많이 사용하지는 않는 편)
// 클래스 컴포넌트는 React.Component를 상속받아 사용함
// 함수형이 더 간편하다
class App2 extends React.Component {
    
    // state : 현재 컴포넌트에서 사용하는 상태 값
    // props는 부모 컴포넌트에서 전달되는 값이지만 state는 현재 컴포넌트에서만 사용되는 값으로 수정 가능함
    // props는 수정 불가능.
    // state의 값이 변경되면 리엑트는 화면을 다시 렌더링을 함
    // state의 값을 직접적으로 변경하는 것은 불가능, setState()함수를 사용하여 값을 수정
    
    
    state = {
        count : 0,
    };

    plus = () => {
        this.setState({count:this.state.count + 1}) //이렇게 해야 값이 변동이 된다.
        console.log('plus');
    }

    minus = () => {
        console.log('minus')
        this.setState({count: this.state.count-1})
    }

    // render() : 클래스 컴포넌트에서 화면을 렌더링하기 위한 메서드
    // render은 함수 컴포넌트와 사용 방법이 동일하다
    render() {
        return(
            <div>
                <h1>클래스 컴포넌트 App2</h1>
                <h3>카운트 수 : {this.state.count}</h3>
            {/*    버튼 추가*/}
                <button onClick={this.plus}>plus</button>
                <button onClick = {this.minus}>minus</button>
            </div>
        );
    }

    constructor(props) {
        super(props);
        console.log('생성자 실행');
    }
    
    //componentDidMount,componentDidUpdate,componentWillUnmount는 리액트의 생명주기에 관련되어 있는 이벤트 함수
    // componentDidMount() : 해당 컴포넌트가 DOM에 추가된 후 동작하는 이벤트
    // componentDidUpdate() : 해당 컴포넌트의 데이터가 변경된 후 동작하는 이벤트
    // componentWillUnmount() : 해당 컴포넌트가 더이상 사용되지 않아 삭제된 후 동작하는 이벤트
    //클래스 컴포넌트에서만 사용할 수 있음
    // 함수 컴포넌트에서는 해당 이벤트 함수들을 사용할 수 없음
    // 함수 컴포넌트에서 해당 이벤트 함수들을 사용하기 위해서 HOOKS라는 기능을 추가하여 해당 이벤트를 구현함
    componentDidMount() {
        console.log('컴포넌트 생성 완료')
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("컴포넌트 업데이트 완료")
    }
    // componentWillUnmount() {
    //     console.log('컴포넌트 제거 완료') //삭제할 때 사용됨
    // }

}

export default App2;

Notification.jsx

import React from "react";

const styles={
    wrapper : {
        margin:8,
        padding:8,
        display: 'flex',
        flexDirection : 'row', //밑으로 쌓이게끔
        boarder :'1px solid gray',
        borderRadius : 16,
    },
    messageText : {
        color :'black',
        fontSize:16,

    },
};

class Notification extends React.Component {
    constructor(props) {
        super(props);

        this.state={};
    }
    render() {
        return(
            <div style={styles.wrapper}>
                <span style = {styles.messageText}>{this.props.message}</span>
            </div>
        );
    }
}
export default Notification;

NotificationList.jsx

//NotificationList.jsx
import React from "react";
import Notification from "./Notification";
import notification from "./Notification";

//js 배열은 다른 언어의 list와 같다.

// 댓글 데이터 생성
const reservedNotifications = [
    {id:1,message : "안녕하세요, 오늘 일정 알려드립니다"},
    {id:2,message: "오후 수업 시간입니다."},
    {id:3,message: "이제 곧 쉬는 시간입니다"},
];

// 자바스크립트 타이머 객체 정보를 저장하는 변수
// setTimeout : 1회용 타이머 , 지정된 시간 이후에 한 번 동작, 실행시 타이머 정보를 반환
//              타이머 삭제 시 clearTimeout()을 사용
// setInterval : 지정된 시간마다 동작하는 타이머,실행시 타이머 정보를 반환 
//               멈출수가 없음. 타이머 삭제 시 clearInterval()을 사용한다
var timer;


class NotificationList extends React.Component {
    constructor(props) {
        super(props);

        // 현재 컴포넌트의 상태인 notifications 선언
        this.state = {
            // 빈 배열 타입인 state가 생성
            notifications:[],
            // notifications: reservedNotifications,
        };
    }

    // 화면에 처음 그려질 내용
    render() {
        return (
                // state의 notifications 배열을 가지고 화면을 그려줌
            // notifications 배열의 기본값이 비었기 때문에 화면에 아무것도 그리지 않는다
        // notifications:[] 이 값을 가져와 돌린다.
        // 지금 빈 배열이라 돌릴 수 없다. 그래서 밑에 부분이 화면에 그려지지 않는다.
        <div>
            {
                this.state.notifications.map((item) => {
                    return <Notification key={item.id} message={item.message}/>
                })
            }

            {/*원래는 아래 처럼 해야 했다. 하지만 귀찮으니까 위의 것 처럼 행한다.*/}
            {/*<Notification key={reservedNotifications[0].id} message = {reservedNotifications[0].message}/>,*/}
            {/*<Notification key={reservedNotifications[1].id} message = {reservedNotifications[0].message}/>,*/}
            {/*<Notification key={reservedNotifications[2].id} message = {reservedNotifications[0].message}/>,*/}
        </div>
    )

    }

    // render() 함수 실행 후 동작(다 끝내고 동작하는 함수)
    componentDidMount() {
        // object 타입의 확장 표현식을 통해서 변수 notifications에 state가 가지고 있는 notifications의 데이터를
        // 대입한다.
        //const/let [변수명1, 변수명2, ...] = [원본배열] -> 배열 값을 차례대로 하나씩 대입시킨다.
        // const val1 = 10; 이거랑 유사하다.
        // const val2 = 20;

        const {notifications} = this.state;
        //state의 notification의 데이터가 비어 있음
        // const {notificaions} = this.state.notifications
        // 랑 같은 거.(확장표현식)


        // 타이머를 사용하여 지정된 시간마다 동작하도록 설정함
        // timer = setInterval(() => {
        //     if (notifications.length < reservedNotifications.length) { //notifications.length는 무조건 0으로 뜨고 reservedNotifications.length는 3
        //         const index = notifications.length;
        //         // 배열 notifications에 데이터 추가
        //         notifications.push(reservedNotifications[index]); //데이터 하나를 추가해준다
        //
        //         //state의 상태 수정
        //         this.setState({
        //             // this.state에 있는 notifications에 현재 componentDidMount 안에 있는 지역변수
        //             // notifications의 데이터를 저장한다
        //             notifications: notifications,
        //         });
        //     } else {
        //         clearInterval(timer);
        //     }
        // }, 2000);


        setTimeout(() => {
            this.setState({
                notifications : reservedNotifications,
            });
            console.log("데이터 추가 완료");
        }, 3000);

        console.log("마운트 완료")
    }

    componentDidUpdate() {
        console.log("상태 업데이트")
    }
}

export default NotificationList;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// default로 되어있어서 {}없이 바로 import 가능하다
import App from './App';
import reportWebVitals from './reportWebVitals';
import App2 from "./App2";
import NotificationList from "./mounts/NotificationList";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
    {/*    js의 문법. js의 return부분을 사용하겠다는 의미.
    jsx = js + html + xml
    여기에 넣을 때 전부 시작태그 끝 태그 다 있어야 한다.
    <APP></APP> 혹은 <APP / > 둘 중 하나를 골라 해야한다.*/}

    {/*    무조건 대문자A를 사용해줘야 한다.*/}
    {/*    jsx문법에서 화면을 렌더링하기 위한 태그의 이름은 반드시 첫글자가 "대문자"이어야 함*/}
    {/*    대문자를 사용하는 이유는 일반적으로 html 태그를 모두 소문자로 사용하기 때문에 일반 html태그인지
            jsx문법으로 생성된 태그인지를 구분하기 위함이다*/}

    <App />
        <br/><hr /><br />
    <App2/>
        <NotificationList/> <----- 여기 추가됨!!
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </React.StrictMode>
    // <h2>이렇게 부모태그가 2개가 되면 오류가 발생한다.</h2>
);
reportWebVitals();
























profile
JYR00
이전 포스트

TIL 2022-12-29 React 프로미스

다음 포스트

TIL 2023-01-03 리액트 컴포넌트

0개의 댓글