따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트

이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다.

웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다.

 

간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자.

www.youtube.com/watch?v=Sh3qdouSz8w&t=618s

 

주요 내용

리액트 이벤트 처리하기

button에 이벤트 얹이기

클래스 정의하기

 

 

//App.js

import React from 'react';
import {Icon, Button, Progress, Segment, Input} from 'semantic-ui-react'


class Login extends React.Component{
  constructor(){
    super()
    this.state = {id : "로그인 완료"}
  }


  render(){
    return(
    <div>
      <Input onChange = { (e) => this.setState({ id: e.target.value })}/>
      <Button value = {this.state.id} onClick ={ (event) => {
        alert(event.target.value)
      } }> Login </Button>
    </div>
    )
  }
}


function App() {
  return (
    <div>
<h1>아이디를 입력해 주세요.</h1>
<Login/>
    </div>
  );
}

export default App;

 

이런ㅋㅋㅋ 갑자기 폭주 하시네ㅋㅋㅋㅋ

 

내가 입력창에 입력한 텍스트가 얼럿으로 출력되게 하려면 요렇게 하라는데 너무 버벅대시고 코드가 깔끔하지 못한 느낌이 쌔다. 일단 넘어가자.

class Login extends React.Component{
  constructor(){
    super()
    this.state = {id : "로그인 완료"}
  }

  render(){
    return(
    <div>
      <Input onChange = { (e) => this.setState({ id: e.target.value })}/>
      <Button onClick ={ (event) => {
        alert(this.state.id)
      } }> Login </Button>
    </div>
    )
  }
}

이런 결과물.

핵심은 state고 이벤트가 발생했을때 어떻게 띄워줘야하냐 이런게 중요하다고 한다..

 

리액트 공부 해야됨

자바스크립트 공부 해야됨

이 선생님 리액트, 자바스크립트 까먹었음 ㅋㅋ

 

자 어쨋든 목표에 집중하면,

심플한 웹페이지를 내 url에 올리는 것임.

사진을 올리고 사진 아래에 댓글을 달 수 있는 페이지를 만드는게 목표임.

내 목표와 일치함.

 

후 그래도 끝까지 가봅니다.

 

다음강의 보기

2021.03.25 - [분류 전체보기] - 따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기

따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기