카테고리 없음

2단원 정리[2] Do It 리액트 모던 웹 개발 with 타입스크립트 (리액트) 공부

ㅋ ㅅㅋ 2024. 11. 11. 03:29

 

6) 컴포넌트 이해하기

  • 리액트 컴포넌트는 스몰토크의 컴포넌트와 개념적으로 같음 단 리액트 16.8버전이후로 리액트 훅(react hooks)이라는 새로운 매커니즘이 생겨 단순한 함수 행태로도 컴포넌트를 구현할 수 있게 되었음.
컴포넌트
객체지향 언어의 원조인 스몰토크에서 유래된 용어

 

스몰토크 컴포넌트 모델 - 뷰 - 컨트롤러로 구현된 클래스
  • 사용자 컴포넌트는 왜 구현해야하는가 ? JSX 문으로 생성한는 가상DOM 생성 코드를 사용자 컴포넌트 쪽으로 이동하여 코드를 간결하게 만들수있음

이렇게 두개를 써서 index.tsx의 코드를 간소화 할 수 있음

  • 클래스 컴포넌트 만들기

따로 클래스 컴포넌트를 만들어서 연동 한 것

  • 리액트 프레임워크는 사용자 컴포넌트를 이처럼 구현 할 수 있게 하는 속성이라는 기능을 제공합니다.

이런 식으로

  • 여기 객체지향 프로그래밍에서 속성이란 클래스의 멤버 변수. 그래서 그 속성값이 수시로 바뀔수 있는 것을 가변이라고 하고 다시 바뀌지 않는것은 불변 이라고 함. 근데 리액트 프레임워크의 속성은 객체지향 언어의 속성과는 다른점이 있음 리액트 프레임워크에서는 속성의 값을 부모 컴포넌트가 자식컴포넌트로 정보를 전달하는 목적으로 사용됨.
  • 위에 사진에서 지금 에러가나는 이유는 유효한 속성의 이름인지를 모르기 때문에 에러가 나는 것
  • 그래서 리액트는 Component 타입에 속성 이름과 타입을 기입한  Props와 같은 속성의 타입을 넘겨줘야함

속성타입을 이렇게 맞춰주면 가능하다

  • 함수형 컴포넌트 
    • 큰 장점은 컴포넌트를 좀 더 간결하게 구현하게 할 수 있음
    • 두 가지 방법이 있음 function 키워드, 화살표 기호 => 로 만드는 방법

function 키워드 / 화살표 함수

  • Key속성 설정하기
  • key속성은 중복되지 않게 키값을 설정해야 한다.(반복문, 배열 같은경우)
  • 컴포넌트가 여러개일때 구별하려고 만든 리액트

코드

  • children속성은 <div>처럼 자식요소를 품을 수 있는 곳에서만 쓸수있음 <input>, <img> 같은거는 못씀

7) 이벤트 속성 이해하기

  • 이벤트란 ? 마우스 클릭, 텍스트 입력 등 사용자 행위가 일어날때 '이벤트가 발생 했다고' 표현함
type : 이벤트 이름으로 대소 문자를 구분하지 않음
isTrusted : 이벤트가 웹 브라우저에서 발생한 것인지(true),  프로그래밍으로 발생한 것인지(false)를 판단함
target : 이벤트가 처음 발생한 HTML 요소입니다.
currentTarget : 이벤트의 현재 대상, 즉 이벤트 버블링 중에서 이벤트가 현재 위치한 객체 입니다.
bubbles : 이벤트가 DOM을 타고 버블링될지 여부를 정합니다
  • 이벤트 처리기 EventTarget은 addEventListener, removeEventListener, dispatchEventListener라는 3개의 메서드를 제공함
  • addEventListener 사용법 : Dom객체.addEventListener(이벤트_이름:string, 콜백_함수:(e: Event)=> void)

코드

물리 DOM 객체의 이벤트 속성

  • 앞의 메서드와는 사용법이 틀림 on뒤에 이벤트 이름을 붙여서 사용한다
  • 예시 ) window.onclick = (e: Event) => console.log('mouse click occurs.')

코드 / 실행화면

여기서 3개의 console.log가 찍힌이유 
addEventListener와는 달리 onclick은 가장 마지막에 설정된 콜백함수만 호출한다 그래서 onclick으로 두개를 실행했지만 하나만 log가 찍힌것임
EventListener의 로그가 찍힌이유는 앞서만든 addEventListener의 코드와 지금만든 onClick의 코드가 한번에 실행되었기 때문이다

 

리액트 프레임워크의 이벤트 속성

  • 리액트 컴포넌트도 ' n이벤트명 ' 으로 사용한다 하지만 리액트의 속성은 onClick, onMouseEnter처럼 소문자로 시작하는 카멜 표기법으로 사용함
  • 그리고 콜백함수의 매개변수 e의 타입이 Event가 아니라 리액트가 제공하는 SyntheticEvent 타입을 설정해야한다는 차이가 있음

코드 / 실행화면

EventTarget의  dispatchEvent 메서드

  • 사용법 : 타겟_DOM_객체.dispatchEvent(new Event('click', { bubbles : true }))
  • 그런데 다른사용법도 있음 : 타겟_DOM_객체.click()

 

이벤트 버블링

  • 자식 요소에서 발생한 이벤트가 가까운 부모 요소에서 가장 먼 부모요소까지 계속 전달되는 현상을 말함

  • 위에 사진을 보면 버튼을 눌렀는데 <div>에 있는 onClick 이벤트 까지 실행된거를 확인 할 수 있다.

stopPropagation 메서드와 이벤트 캡쳐링

  • 앞에서는 자식에서 가까운부모 먼 부모까지 이벤트 버블링이 되었는데 이를 멈추게 하는 메서드가 stopPropagation 를 사용하면 멈출 수 있다.

코드 / 결과창

  • 위 사진을 보면 button 쪽 onClick 이벤트만 실행된걸 확인 할 수 있다.

<input> 요소의 이벤트 처리

  • <input>은  type속성값에 따라 화면에 나타는 모습과 사용자 입력을 얻는 방법이 조금 다름

  • 여기서 <button>과 <input type='button' /> 의 차이는 <button>은 <button><span>asdf</span> 처럼 자식을 가질수 있지만 <input>은 <input type='button' value='버튼' /> 처럼 자식을 가질수가 없다.

<input>의 onChange 이벤트 속성

  • 마우스 클릭을 하면 onclick이벤트가 발생하는것처럼 사용자가 텍스트를 입력을 하면 onChange의 이벤트를 발생시킬수 있음
사용방법은 onclick 이랑 비슷함

export default function OnChange() {   
     const onChange = (e: ChangeEvent<HTMLInputElement>) => {
        console.log('onchang', e.target.value);
    }   

   return (       
   <input type="text" onChange={onChange}
  )
}

 

<input> 요소의 이벤트 관련 속성들

  • type속성값이 checkbox이거나 radio 이면 checked 속성값으로 text, email, password, range 이면 value속성값으로 등등 사용자가 입력한 구체적인 내용을 얻을수가 있음

<input>의  defaultValue와 defaultChecked 속성

  • 초깃값을 설정하고 싶을 때 defaultValue와 defaultChecked 속성을 사용 함
<input type='text' defaultValue='테스트' />
이런식으로 사용함

 

onChange 컴포넌트 구현하기

  • 위 사진대로 코드를 구현해본 결과이다.

드래그 앤 드롭 이벤트 처리

  • draggable이라는 boolean타입 속성을 제공합니다.
  • 마우스를 클릭한 채 드래그 했을때 관련 이벤트가 발생함
종류 발생 시기 리액트 이벤트
속성 이름
dragenter 드래그한 요소나 텍스트 블록을 적합한 드롭 대상 위에 올라갔을 때 발생함 onDragEnter
dragstart 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생함 onDragStart
drag 요소나 텍스트 블록을 드래그 할 때 발생함 onDrag
dragover 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때(수백 밀리초마다) 발생함 onDragOver
dragleave 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을때 발생함 onDragLeave
dragend 드래그를 끝났을때 발생함 onDragEnd
drop 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생함 onDrop

 

  • 그런데 드래그 앤 드롭 이벤트를 처리하려면  preventDefault 메서드를 알아야함
  • preventDefault :  어떤 사용자 액션에 따라 이벤트가 발생했을때 이 이벤트와 관련된 웹 브라우저의 기본 구현 내용을 실행하지 않게 함
  • 웹 브라우저는 기본적으로 drop 이벤트가 발생하지 않도록 설계되어있어서 drop이벤트를 발생하게 하려면 preventDefault  메서드를 사용해야 좋음

DragDrop 컴포넌트 구현하기

위 코드대로 구현하면 드래그 이벤트가 사용이됨 !

FileDrop 컴포넌트 구현하기

 

  • 파일같은경우는 웹 브라우저 밖에서 안쪽으로 들어오는 것이므로 draggable와 같은 요소는 필요가 없음
  • FileInput에서는 e.target.files로 file객체정보들을 얻지만 FileDropd은 드롭한 파일을 가져와야 하므로 e.dataTransfer.files에서 file 객체정보를 얻을수 있다는 차이가 있음

코드 / 결과 화면

 

위에 내용으로 2단원 끝