TIL [객체를 만드는 방법] [리액트에서 쓰는 중요한 방법]

11284 단어 ReactJavaScript객체JavaScript

1. 기존의 객체를 만드는 방법

const obj = {
  name: 'gildong',
  age: 22,
};

2. 기존의 HTML + JavaScript 에서 이벤트를 실행할 때

<head>
  <title>인라인 이벤트 모델</title>
  <script>
    function sum(n){
      console.log(n);
    }
  </script>
</head>

<body>
  <button onclick = "sum(10)">클릭</button>
  <button onclick = "console.log('ok')">클릭</button>
</body>

HTML에서 이렇게 인라인 이벤트 모델을 실행할 때는 큰따옴표 안에 실행할 코드를 넣었다.

3. 리액트에서 이벤트를 실행할 때

리액트에서는 함수 형태의 객체를 바로 전달한다. 함수는 바로 만들어서 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다.

const Say = () => {
  const [message, setMessage] = useState('');
  
  return {
    <div>
      <button onClick = {() => setMessage('안녕하세요!')}>입장</button>
    </div> // 렌더링 부분에서 바로 함수를 전달한다.
  };
}
const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!'); 
  // 화살표 함수를 렌더링 부분 외부에 미리 만든다.
  
  return {
    <div>
      <button onClick = {onClickEnter}>입장</button>
    </div>
  };
}

4. 기존의 객체를 만드는 방법과 다르게 객체를 만드는 방법

const obj = {
  ['name']: 'gildong',
  ['age']: 22,
}

왜 이 방법이 리액트에서 중요할까?

리액트에서 이벤트를 실행할 때 렌더링 부분 외부에 미리 함수를 만들어서 전달한다고 했다. 그 함수의 파라미터로 받아온 값 (여기서는 이벤트 실행 후 나온 값 e)으로 객체를 만들때 유용한 방법이다. 주로 밑의 예시 처럼 this.setState를 쓸 때 사용하면 좋다.

state = {
  username: '',
}

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value // { ['username']: e.target.value }
  });
}
           . 
           .
           .
 
render() {
  return (
    <div>
      <input
        type='text'
        name='username'
        placeholder='사용자명'
        value={this.state.username}
        onChange={this.handleChange} // 함수가 들어감
      />
    </div>
  );
 }

이렇게 하면 기존의 state 객체가 이렇게 바뀌게 된다.

state = {
  username: e.target.value // 사용자가 input box에 입력한 값
}

username의 value는 사용자가 입력한 값이 되겠다.

04. Javascript 기초(형변환(Type Conversion))
[TIL] NestJS 공부 - Test

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage