2022.07.14

P101~150

proptypes 에는 array, arrayOf, bool, func, number, object, string, symbol, node, instanceOf, oneOf, oneOfType 등 여러 종류가 있다. 

 

state 

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props 는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props 를 읽기 전용으로만 사용 가능. props 를 바꾸려면 부모 컴포넌트에서 바꿔주어야 함. 

 

클래스형 컴포넌트의 state 

컴포넌트에 state 를 설정할 때에는 constructor 메소드를 작성하여 설정함. 또 constructor 를 작성할 때는 반드시 super(props)를 호출해 주어야 함. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출함. 다음으로 this. state 에 초기값 설정. 이때 컴포넌트의 state 는 객체 형식이어야 함. render 함수에서 state 를 조회할 때는 this.state 를 조회하면 됨.

 

state 객체 안에 여러 값이 있는 경우

1. constructor 메서드를 쓰지 않고 state 초기화하기. 

2. this.setState 에 객체 대신 함수 인자 전달하기. (this.setState 를 사용하여 state 값 업데이트 시 상태가 비동기적으로 업데이트되므로 )

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

setState 의 두 번째 파라미터로 콜백 함수를 등록하기 

 

함수 컴포넌트에서 useState 사용하기

useState 는 배열 비구조화 할당을 이용함. 

useState 함수의 인자에는 상태의 초기값을 넣어주는데 이때 값의 형태는 자유.

함수 호출 시 배열이 반환되는데, 배열의 첫 번째 원소는 현재 상태이고 두 번째 원소는 상태를 바꾸어 주는 세터 함수임. 

한 컴포넌트에서 useState 여러 번 사용 가능.

 

state 사용 시 주의 사항 

클래스형이든 함수형이든 state  값을 바꾸어야 할 때는 setState 혹은 useState 를 통해 전달받은 세터 함수를 사용해야 함.

배열이나 객체를 업데이트해야 하는 경우에는 배열이나 객체 사본을 만들고 그 사본을 업데이트한 후 그 사본의 상태를 setState 혹은 setter 함수를 통해 업데이트함. 객체에 대한 사본을 만들 때는 spread 연산자 ... 을 사용함. 배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용. 

 

정리

props 는 부모 컴포넌트가 설정하고, state 는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있음.

props 를 사용한다고 해서 값이 무조건 고정적이지는 않음. 부모 컴포넌트의 state 를 자식 컴포넌트의 props 로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메서드를 호출하면 props 도 유동적으로 사용 가능. 

 

 

이벤트 

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용 하는 것.

 

이벤트 사용 시 주의사항 

1. 이벤트 이름은 카멜 표기법으로

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달

3. DOM 요소에만 이벤트 설정 가능

(컴포넌트에 자체적으로 이벤트를 설정할 수는 없으나 전달받은 props 를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.)

 

이벤트 핸들링 과정 

1. 컴포넌트 생성 및 불러오기 2. onChange 이벤트 핸들링하기 3. 임의 메서드 만들기 4. input 여러 개 다루기 5. onKeyPress 이벤트 핸들링하기 

 

e 객체는 SyntheticEvent 로 웹 브라우저의 네이티브 이벤트를 감싸는 객체임. 이는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없음. 따라서 만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해 주어야 함. 

 

임의 메서드 만들기 

함수를 미리 준비하여 이벤트에 함수를 전달하는 방법이 있음. 이는 성능상으로는 차이가 거의 없지만 가독성은 훨씬 높음. 단 이때 메서드와 this의 관계가 끊어져 버리기 때문에 this 와 바인딩하는 작업이 필요함. constructor 함수에서 바인딩 작업 확인 가능. -> 이 바인딩 작업을 좀 더 수월하게 하는 법: Property Initializer Syntax 를 사용한 메서드 작성 (화살표 함수 형태로 메서드 정의하기) 

 

input 여러 개 다루기 

event 객체 활용하기. *객체 안에서 key 를 [] 로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됨.

 

함수 컴포넌트로 구현하기 -> e.target.name 을 활용하지 않고 onChange 관련 함수 두 개를 따로 만들 어 줌. but 인풋의 개수가 많아질 경우 전자를 활용하는 것이 더 좋을 수도 있음. e.target.name 값을 활용하려면 useState 를 쓸 때 인풋 값들이 들어 있는 form 객체를 써주면 됨. 

 

ref 는 DOM 을 꼭 직접적으로 건드려야 할 때 사용해야 함. 아닌 경우는 state 로 대체 가능.

DOM을 꼭 사용해야 하는상황

1. 특정 input 에 포커스 주기

2. 스크롤 박스 조작하기

3. Canvas 요소에 그림 그리기 등

 

ref 사용 방법 두 가지

1. 콜백 함수를 통한 ref 설정 -> ref 를 달고자 하는 요소에 ref 라는 콜백 함수를 props 로 전달해 주기

2. createRef 를 통한 ref 설정 ->컴포넌트 내부에서 멤버 변수로 React.createRef() 를 담아주기. 그리고 해당 멤버 변수를 ref 를 달고자 하는 요소에 ref props 로 넣어주기. 나중에 ref 를 설정해 준 DOM 에 접근하려면 this.input.current 조회