Daily Coding - FE 4주차 - 39강 40강 42강 43강

39강

React Devtool

=> chrome Extention을 통해 설치한다

components

: 컴포넌트를 트리 상태로 보여주는 툴

 

40강

디버깅 Part 2.

- React Devtool (Chrome Extension)

Componets : 컴포넌트를 드리 구조로 보여주며 상태 정보를 확인 할 수 있다

Profiler : 렌더링된 컴포넌트를 소요 시간과 함께 보여준다

 

- Google Lighthouse

구글에서 만든 Profiler이며 profiling만 하기 위해서 만든 전문적인 tool이다.

웹페이지에 퀄리티를 개선시키기 위해 만들어진 tool이며 어떤 웹에서도 모두 사용이 가능하다.

SEO와 같은 지표도 확인이 가능하다.

크롬을 사용하면 별도 설치가 필요없다.

https://github.com/Febase/FeBase/blob/master/S2_Round2/lighthouse.md

 

41강

이벤트 핸들러

이벤트 리스너

JavaScript : .addEventListener()

Reacrt :  onClick={}

 

컴포넌트 함수

: 처음에 렌더링이 될때 모든 컴포넌트 함수는 실행이 완료되며, 컴포넌트 내에서 이벤트가 발생해도 컴포넌트 함수는 다시 실행되지 않는다.

 

state

컴포넌트 내에서 바뀔 때마다 항상 컴포넌트를 업데이트 해줄 수 있는 값

ex) state, props

 

useState

State를 업데이트 해주는 React 라이브러리에서 제공해 주는 빌트인 훅

훅(hool)

: 리액트 v16.8 버전부터 나온 기능이며 함수형 컴포넌트에서만 쓸 수 있는 함수로 리액트의 lifecycle기능을 연동 할 수 있다.

 

useState의 특징

1. 해당 컴포넌트 안에서만 사용할 수 있음

2. const [state, setState] = useState(initialState)와 같이 사용

 

useState 주의 점

부모 컴포넌트 => props => 자식 컴포넌트

*부모 state의 컴포넌트가 바뀔 때마다 자식 컴포넌트가 리랜더링이 일어남.

불필요하게 리랜더링이 많이 발생하게 된다면 성능상 이슈가 될 수 있다.

 

Form Input

<form> <input> tag를 통해 값을 입력할 수 있는 요소를 추가

데이터를 유저로부터 받을 수 있는 중요한 요소 중 하나

갑을 입력 받을 때 onChange 리스너를 통해 변화를 감지한다.

 

event.preventDefault()

: 해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우

ex) a 태그 클릭 시 href 링크로 이동 / form의 submit를 누르면 새로 실행이 됨

 

42강

브라우저의 이벤트

1. 이벤트 캡처링

: 어디서 이벤트가 발생했는지 body tag 부터 시작해서 찾아가는 과정.

 

2. 이벤트 타겟팅

: 발생한 이벤트 즉 목표지점을 잡고 특정 dom 요소에서 실행.

 

3. 이벤트 버블링

: 이벤트가 실행되고 위로 하나씩 타고 올라오는 과정. 

 

이벤트 버블링을 막고 싶을 때,

=> event. stopPropagation()을 사용한다.

<section onClick = {() => console.log("section click")}>
	<div onClick = {(event) => {
    	event.stopPropagation();
        console.log("div click")
        }}
     >
     	<button onClick = {() => console.log("button click")}>
	        클릭
        </button>
    </div>
</section>

 

 

43강

복잡한 이벤트와 상태 디자인하기

- 동작 설명해 보기

- state와 event handler로 나누기

- 비슷한 것 묶기

 

!연습 - 동작 설명해보기!

 - 드롭다운 컴포넌트 - 

1. 드롭다운 클릭 => event handler

2. 옵션이 나타남 => state

3. 옵션을 클릭 => event handler

4. 옵션 리스트 사라짐 => state

5. 클릭한 옵션만 보여짐 => state

 

state

=> 사용자가 화면에서 변화를 느끼는 것들 // 명사 개념

ex) 목록, 선택한 값 등

 

event handler

=> 사용자가 어떤 행동을 취하는 것들 // 동사 개념

ex) 클릭, 선택 등

 

---------------------------------------------------------------
비슷한 거끼리 묶는 작업 진행.

2, 4번

 

눌렀을 때 옵션이 보임 + 선택 외 옵션이 사라짐

state 옵션이 열림 => true

state 옵션이 닫힘 => false

======  함수이름 예시)  isOpen  ======

 

 

옵션을 선택 + 선택되지 않음

state 옵션이 선택 됨 => object

state 옵션이 선택되지 않음 => null

======  함수이름 예시)  selectedOption  ======

 

 

옵션을 클릭함 => event handler

======  함수이름 예시)  handleSelect ======

 

 

드롭다운을 클릭함 => event handler

======  함수이름 예시)  handleClick ======