[FE] React : 이벤트 처리하기

- 특정컴포넌트에서 prop으로 받은 데이터를 보여주기만 한다면 해당 컴포넌트에서 state는 사용할 필요가 없다.

- habit은 props로 받은 habit을 보여주기만 함

---

  handleDelete = habit => {
    //filter함수로 동일하지 전달된 habit.id값이 새로만드는 habits배열의
    // item요소의 id값과 동일하지 않은 것만 다시 뿌려줌 -> 그럼 삭제요청온 id값 빼고 다시 그려줌
    const habits = this.state.habits.filter(item => item.id !== habit.id);
    this.setState({ habits });
  };

 

javascript filter 함수에 대해 알아보자 자바스크립트 filter 함수

참고.

 

state를 앱으로 가져와서 넷바 인풋필드 추가해야하고 그럼.

 

공통된 state를 사용하려면 state를 관리하는 것을 좀 더 위로 올려야함..마치 음..

habits.jsx 가 habit.jsx보다 상위컴포넌트라서..Habit 컴포넌트에서 state를 관리하지않고 Habits 컴포넌트에서 state를 관리하는 것 처럼!

 

habits.jsx에서 사용하던 데이터를 더 상위에서 사용하기 위해선 더 위의 부모 컴포넌트에서 state를 관리해줘야한다.

그러면 부모 -> 자식 컴포넌트로 갈때 자식에서 부모의 state데이터를 props로 받아주면 되기 때문이다.

 

-----------------------------------------------------------------------------------------

 

navBar.jsx에 NavBar 컴포넌트를 만들어준다.

 

<nav> </nav> 는 header나 article 요소 안에 올수도 있다. 

=> 주요한 네비게이션 역할을 할 때 사용한다. 

 

하위 컴포넌트에서 상위로부터 데이터를 받을때 하위컴포넌트에서 prop으로 전달 받는다. 

 

totalCount={this.state.habits.filter(item => item.count > 0).length}

habis 배열에서 요소 하나하나를 도는데. 해당되는 요소의 count가 0이상인것들로 배열을 새로 만들어줌.

filter가 배열을 돌며 조건에 맞는 배열을 새로 만들어주는 함수임

(== callbackFunction의 조건에 해당되는 모든 요소를 배열로 새로 생성해줌)

 

아무튼 그래서 count가 0 이상인애들로 새로 배열을 만들고. 그것의 length 니깐.

지금 진행되고 있는 것들 count가 0이상인애들의 요소만 셀 수가 있음

 

-----------------------------------------------------------------------------------------

 

form 태그를 써서 기본적으로 submit을 발생하게 되면 페이지가 리프레쉬 되거나 다른 페이지로 가는게 예상되기 때문이다. 

 

event.preventDefault(); //를 써서 브라우저의 기본 기능을 취소해준다. 

=> 더이상 submit해도 리프레쉬 되지 않음

 

 

input에 있는 데이터를 알려면?

원래 DOM에서는 const input = document.querySelector('s');

input.value를 통해서 input으로 받는데....

 

React에서는 어떻게 할까용

 

Refs and the DOM

- 리액트에서 다른 리액트 요소에 접근하고 싶으면 ref를 쓰면 된다.

 

멤버변수에 입력을 해준다. 아래와 같이.

inputRef = React.createRef();를 호출하면 ref라는 오브젝트가 생긴다.

=> 지금 하려는 일이 최상위 컴포넌트에서 입력한 input 값을 다른 하위 컴포넌트에서도

사용할 수 있게 하려는 것임..

 

그 다음에 이 값을 render() {

   return (

     <input 태그에 ref = {this.inputRef} ,

.

.

. /> 해준다.

  )

}

 

정리

 

props

부모 컴포넌트 데이터 -> 자식 컴포넌트 데이터

-> 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링

 

그러나 직접적으로 자식을 수정해야하는 경우가 있다.

수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고,

DOM 엘리먼트일 수도 있다.

 

예를 들면 html 작성할 때 <div id="idddd">와 같이 id를 달고,

이에 해당되는 DOM요소에만 스타일 따로 적용이나..자바스크립트에서 해당하느 DOM에소에

접근해서 여러가지 작업 가능.

 

리액트에서도 DOM에 이름을 다는 방법이 바로 ref

 

-> state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용

ex) input에 포커스 주기, 스크롤 박스 조작, canvas 요소에 그림 그리기 등

 

React는 두 경우 모두를 위한 해결책 제공 -> Ref

 

 

[React] ref란? - DOM에 이름 달기

 

~~~여기까지는 Class Component!

 

React는?

1. 컴포넌트 들이다.

2. 조금이라도 업데이트 되면 전체적으로 re-render가 된다.

 

 

Component
Class	Function
React.Component React.PureComponent	fucntion memo(function) React Hook -> 함수를 쓰면서 class처럼 state와 라이프사이클 메소드 사용 가능

 

-> UI가 정의된 부분은 render함수

react 어플리케이션은 state가 변화되면 render가 다시됨.

렌더가 많이 돼도 괜찮아! 왜냐면

react는 이전과 지금 업데이트된 부분을 체크해서 실제로 필요한 부분만

DOM에 업데이트 됨. =>

그래서,, 개발자도구 element에서 돔 요소 전체가 깜빡이거나 살아나면 잘못하고 있는것

 

 

pureComponent 와 memo

 

Component 대신에 PureComponent -> 최상위 state가 변화안되면

re-render하지 않음.

 

pureComponent:

- 컴포넌트가 업데이트 되기 전에 야 너 컴포넌트 업데이트 되어야 하니? 물어보는

함수가 있는데. Component는 이걸 구현안했지만 퓨어는 구현해놓음.

이전의 prop과 state를 지금 업데이트 된 prop과 state와 가볍게 비교해서.

- 같으면 렌더안하고, 다르면 렌더함.

- 가볍게 비교한다는 것은 -> 동일한 오브젝트라면 오브젝트의 레퍼런스만 검사하기 때문에 그 오브젝트 내부의 데이터가 변한것도 동일하다고 판단해서 렌더함수가 호출이 안되어버림.

 

방법1. 그래서 오브젝트의 안의 요소를 따로 빼서 받아와야함. habit이라는 객체를 통으로

전달하지만 말고. 그 안의 요소 count등을 따로 빼와서 한다. 

 

방법2. 오브젝트 다에티저 자체를 변경하는 것.

오브젝트가 변경될 때마다 새로운 오브젝트를 만드는게 좋다.

=> 이걸 관리해주는 라이브러리가 있음.

 

---

라이프사이클 클래스에 추가하는 법

componentDidMount()

-> 컴포넌트가 UI 사용자에게 보여질떄

-> ex. 소캣 초기화

componentWillUnmount()를 기본적으로 두 개 구현하는 편이다.

-> 지워지기 전에

-> ex. 리셋할 때

 

*앨리의 드림코딩 복습

 

그 외

 

다른 별도의 코드가 없으면 { return } 이 생략 가능해요 :)

 

1.

() = > { return 3; } 

 

2. 또는

() => 3

 

3. 또는 

() => ( 3 )