-state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트

🎈input : 사용자가 입력한 글 다루기, 블로그 글발행 기능 만들기

input태그 사용하기

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select> 등등등등..

뒤에 슬래시( / ) 붙여주자

input에 뭔가 입력시 코드를 실행하려면

유저가 input에 뭔가 입력시 코드를 실행해주고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다.

<input onChange={ () => { 실행할코드 } } />

사용할 수 있는 이벤트 핸들러들은 매우 많습니다. 저건 예시 중에 하나임

input에 입력한 값 가져오는 법

<input onChange={(e)=>{ console.log(e.target.value) }}/>

e.target : 현재 이벤트가 발생한 곳

e.preventDefault( ) : 이벤트 기본 동작을 막아줌

e.stopPropagation( ) : 이벤트 버블링을 막아줌, 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능

클릭이벤트는 상위 html로 퍼짐(이벤트 버블링)

상위 html로 퍼지는 이벤트버블링을 막고싶으면 사용하기!

사용자가 input에 입력한 데이터 저장하기

function App (){
  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

state에 문자를 저장하고 싶은데 기본값을 뭘 넣을지 모르겠으면 따옴표 2개만 치면 됨

(참고)

위 코드 실행해보면 a를 입력하면 콘솔창에 아무것도 안뜨고 aa를 입력하면 a만 콘솔창에 뜸

state변경함수는 약간 늦게 처리됨

async하게(비동기적으로) 처리됨 그래서 console.log가 먼저 실행돼서 저렇게 나오는 것

🎈class를 이용한 옛날 React 문법

class 문법으로 컴포넌트 만드는 법

class Modal2 extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <div>안녕</div>
    )
  }
}

1. class 작성하고 컴포넌트 이름 작명합니다.
2. constructor, super, render 함수 3개 채워넣습니다. 기본 템플릿 같은 것임
3. return 안에 축약할 html 적으면 됨

class 컴포넌트에서 state 만들려면

class Modal2 extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.state.name }</div>
    )
  }
}

1. this.state라는 변수만들고 거기 안에다가 object형식으로 state 나열하면 됨
2. state 사용하고 싶으면 this.state.state이름 쓰면 됨

class 컴포넌트에서 state 변경은

class Modal2 extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.state.age }
        <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
      </div>
    )
  }
}

state 변경하고 싶으면 this.setState라는 기본함수를 가져다 씁니다.

소괄호 안에 새로운 state 넣으면 그걸로 기존 state를 업데이트 해줍니다.

갈아치워주는 것 X, 차이점만 반영해줌 O

class 컴포넌트에서 props는

1. constructor, super에 props 파라미터 등록
2. this.props 쓰면 됨

결론 : 컴포넌트 만들 일이 있으면 class는 복잡하니까 function 쓰자

🎈새로운 프로젝트 생성 & Bootstrap 사용하기

React-Bootstrap 사용법

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
    </div>
  )
}

복붙할 때 대문자로 시작하는 컴포넌트 이름은 import 해와야합니다.