React - 24.05.21

HI_DO·2024년 5월 21일

Component

Component 생성할때는 앞글자를 대문자로 생성한다.
rsc + tab 입력시(기본 틀 생성) (함수형 컴포넌트)
rcc + tab ->component 기본 설정 (클래스형 컴포넌트)

결과

App.js에 Component 입력
(App에서 MyComponent를 사용할 수 있는 것은 export를 사용했기 때문이다)

props(properties)

컴포넌트 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App가 부모 컴포넌트)에서 설정 할 수 있다.

구조 분해 할당(비구조화 할당)

구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

객체에서 값을 추출하는 문법

결과값

결과값

state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트를 바꿔 줘야 한다.
예를 들어, 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 줘야 값이 변경될 수 있다. 반면 MyComponent에서는 전달 받은 name 값을 직접 바꿀 수 없다.

오류 원인 : 형제들(div)끼리 나눌 수 없다.

결과
원본

setState 문법 (중요)

this.setState((prevState, props)=>{
                return{
                 // 업데이트 하고 싶은 내용
                }
            })

setState가 끝난후 특정 작업 실행하기

실행 결과

함수 컴포넌트
리액트 16.8버전에서는 컴포넌트에서 state를 사용할 수 없었다.
1.8버전이후부터는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었다.

state를 사용할 때 주의사항

클래스형 컴포넌트든 함수 컴포넌트든 state를 사용할 때는 주의해야 할 사항이 있다.
state값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 set함수를 사용해야 한다.

// 클래스형 컴포넌트에서..
this.state.number = this.state.number +1;
this.state.array = this.array.push(2);
this.state.object.value = 5;
// 함수형 컴포넌트에서..
const [object, setObject] = useState({a:1, b:2});
object.b = 3;

배열 복사

리터럴연산자를 이용할 경우 새로 복사한다.

Array.prototype.concat() -> 두 개 이상의 배열을 병합하는 데 사용되며 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환한다
새 항목 추가

Array.prototype.filter() -> 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 참 값을 반환하는 모든 값으로 새 배열을 구성하며 callbackFn 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않는다
보통 실무에서 삭제할 때 사용

Array.prototype.map() -> 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

정리
insert: concat, delete: filter, update: map

이벤트를 사용할때 주의사항

이벤트 이름은 카멜 표기법으로 작성한다.(javascript의 onclick은 리액트에서 onClick으로 작성한다.)
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
DOM 요소에만 이벤트를 설정할수 있다.
즉, div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
예를 들어
과 같이 설정했다고 하면
MyComponenet를 클릭 할때 doSomthing함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐이다.
따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다.
하지만 전달 받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다.
{/* (...) */}

input 태그의 값을 입력할때마다 SyntheticEvent가 콘솔에 출력되는 것을 확인할 수 있는데 e객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. SyntheticEvent는 이벤트가 끝나고 나면 초기화 된다.
예를 들어 0.5초 뒤에 e객체를 참조하면 e객체 내부의 모든 값이 비워지게 된다.

target과 value

click 이벤트 추가

e객체를 사용한 경우

input 여러개 다루기

e.target.name 해당 인풋의 name을 가리킨다.

위 코드에서 꼭 확인해야 할 코드는(핵심코드) ->

 handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value, //[]는 key선택자
    });
  };

onKeyPress 이벤트

키를 눌렀을 때 발생하는 KeyPress 이벤트 처리 방법을 알아보자

import React, { Component } from 'react';
class EventPractice extends Component {
  state = {
    message: '',
    username: '',
  };
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value, //[]는 key선택자
    });
  };
  //e객체를 실행로직 내부에서 사용하려면 매개값으로 전달 받아야 한다.
  handleClick = () => {
    //e를 안 넣은 이유는 여기서는 이벤트 객체를 사용하지 않기 때문
    alert(this.state.username + ': ' + this.state.message);
    this.setState({
      message: '',
      username: '',
    });
  };
  hadleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.handleClick();
    }
  };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.hadleKeyPress}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}
export default EventPractice;