[react] props, state, ref

props

상위 컴포넌트가 하위 컴포넌트에게 데이터를 넘겨주고자 할 때 사용

- props는 properties를 줄인 표현으로 상위 Component에서 하위 Component의 속성을 설정할 때 사용하는 요소
- props 값은 해당 Component를 불러와 사용하는 부모 Component에서만 설정할 수 있음 
- props 값 설정 및 검증
- 상위 Component에서는 시작 태그 안에 이름=값의 형태로 설정 
- 함수형 Component 에서는 첫 번째 매개변수로 전달되고 클래스형 컴포넌트의 경우에는 객체 안의 props라는 속성에 전달됨

 

state

컴포넌트 내에서 생성해서 수정과 삭제가 가능한 개체로 변경이 되면 컴포넌트를 리랜더링

 

 

ref

컴포넌트를 조작하고자 할 때 생성

 

filter

매개변수가 1개이고 boolean을 리턴하는 함수를 매개변수로 대입하는데 함수의 결과가 true인 데이터만 모아서 다시 배열로 리턴하는 함수

 

 // 데이터 삭제 함수
  // index를 매개변수로 받아서 삭제
  handleRemove = (index) => {
    const { names } = this.state; //중괄호를 하는 경우는 오른쪽에서 중괄호 안의 객체 찾아오기 아래랑 같음! 중괄호 안은 이름 정확히 써야하고 중괄호를 안한 아래같은 경우는 이름 아무거나 가능!!!!!!!!!!!!!
    // const names=-this.state.names;

    // slice: 매개변수 2개 받아서 배열을 잘라내고 복제해서 리턴하는 함수
    // 매개변수는 시작 위치와 마지막 위치를 대입
    /*
    this.setState({
      names: [names.slice(0, index), names.slice(index + 1, names.length + 1)],
    });*/

    // 넘어온 인덱스와 배열의 인덱스가 다른 것만 추출
    this.setState({
      names: names.filter((item, e) => e !== index),
    });
  };