Beginner 6회차 1 (7/31) | 제어 컴포넌트와 비제어 컴포넌트, 선택적 체이닝, 이벤트 버블링과 캡쳐링★, event.preventDefault(), event.stopPropagation(), 네트워크 통신(http 메소드: GET, POST, PUT, DELETE)

제어 컴포넌트과 비제어 컴포넌트

1. 제어 컴포넌트

리액트 상태로 입력 값을 관리하며 상태를 업데이트하여 입력 값을 제어함

 

1. 설명:

• 상태(state)가 컴포넌트 내에서 관리됩니다.

• 사용자가 입력 필드에 입력하는 모든 변화는 useState로 관리되는 상태를 통해 반영됩니다.

• 예제 1에서 value={title}와 onChange 핸들러가 이를 관리합니다.

 

2. 장점:

• 컴포넌트의 상태를 React에서 완전히 제어할 수 있습니다.

• 입력 값에 대한 즉각적인 유효성 검사나 다른 로직을 쉽게 추가할 수 있습니다.

 

3. 단점:

• 상태 업데이트가 빈번하게 일어나므로 더 많은 리소스를 소모할 수 있습니다.

 

--> 제어 컴포넌트에서는 value와 onChange를 사용하여 상태를 관리합니다.

사용자가 입력 필드에 값을 입력하면 onChange 핸들러가 호출되어 상태가 업데이트됩니다.

이 상태가 value를 통해 입력 필드에 반영됩니다.

 

2. 비제어 컴포넌트

ref를 사용하여 DOM 요소에 직접 접근하여 값을 관리하며 상태를 사용하지 않음

 

1. 설명:

• 입력 값이 DOM 자체에 저장됩니다.

• 초기 값은 defaultValue로 설정되지만 이후 입력 값은 상태에 의해 직접 제어되지 않습니다.

• 예제 2에서 defaultValue={todo.title}가 이를 나타냅니다.

 

2. 장점:

• 설정이 간단하고 빠릅니다.

• 상태 업데이트를 자주 하지 않아도 됩니다.

 

3. 단점:

• 입력 값에 대한 즉각적인 유효성 검사나 로직 추가가 어렵습니다.

• 입력 필드의 값에 접근하려면 ref를 사용해야 합니다.

 

--> 비제어 컴포넌트에서는 defaultValue를 사용하여 입력 필드의 초기 값을 설정합니다. 이후 사용자가 입력 필드에 값을 입력해도 상태는 업데이트되지 않으며, 입력 값은 DOM에 직접 저장됩니다.

 

	value	defaultValue
공통점	HTML 폼 요소의 속성으로, 주로 <input>이나 <textarea> 같은 입력 요소에서 사용 defaultValue와 value는 동시에 같이 쓰지 못함 !
차이점	컴포넌트의 상태와 연동 상태가 변경될 때마다 입력 값도 변경 입력 값을 변경하려면 반드시 onChange 핸들러를 사용하여 상태를 업데이트해야 함	입력 필드의 초기 값을 설정 form의 onSubmit을 이용해 값을 읽어옴 사용자가 입력 값을 변경하면 해당 변경 사항은 상태에 반영되지 않고,브라우저의 DOM이 자동으로 이 변경을 반영 주로 초기 값만 필요할 때 사용

 

document.querySelector()

반환값: 첫 번째 매개변수로 전달된 CSS 선택자(selector)에 해당하는 첫 번째 DOM 요소를 반환함.

만약 일치하는 요소가 없다면 null을 반환.

const aEl = document.querySelector("a");
aEl?.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("a!");
});
// 선택적 체이닝 방식
// a를 못 찾으면 null이 반환됨

 

분기처리

프로그램의 흐름을 제어하기 위해 특정 조건에 따라 코드의 실행 경로를 변경하는 방법

분기 처리는 주로 if, else if, else, switch와 같은 조건문을 사용하여 구현됨

a 요소를 못 찾아서 null이 반환되면 에러가 발생하기 때문에 타입가드를 사용함

// 타입 가드를 사용하여 null 체크
if (aEl) {
  aEl.addEventListener("click", (event) => {
    event.preventDefault();
    console.log("a!");
  });
}

 

선택적(Optional) 체이닝 문법

const itemEl = document.querySelector(".item");
itemEl?.addEventListener("click", (event) => {
  console.log("item!");
});

 

itemEl?.addEventListener("click", (event) => {}

? 앞의 코드가 거짓이면 ? 뒤의 코드는 실행되지 않음 --> itemEl가 참이어야 뒤 코드 실행

 

 

인스턴스 메소드

1. event.preventDefault()

브라우저에서 이벤트가 발생했을 때 그 이벤트에 대한 기본 동작을 막는 메소드

 

<a>태그는 클릭했을 때 연결된 링크로 이동하는 것을 기본 기능으로 가짐. 이를 막기 위해 사용

function anchorHandler(event) {
  event.preventDefault()
  // a태그의 기본 기능을 막는다
  console.log('페이지를 이동합니다')
}
<a href="https://heropy.com" onclick={anchorHandler} target="_blank">heropy</a>
// target="_blank" = 새 창에서 링크를 열기

 

<form>태그는 onSubmit이 실행되면 페이지가 새로고침 되는 것을 기본 기능으로 가짐. 이를 막기 위해 사용

function submitHandler(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault() // 페이지 새로고침 방지
  console.log('서버로 전송')
  // await 서버로 전송(수정할 이름)
}
return (
  <li>
    {todo.title}
   <form onSubmit={}>
    <input
      defaultValue={todo.title}
      onKeyDown={keydownHandler}
    />
   </form>
  </li>
)

 

2. event.stopPropagation()

JavaScript에서 이벤트 버블링을 중단시키기 위해 사용되는 메소드 (예제는 밑에서 !)

 

 

이벤트 버블링과 캡쳐링★★★

 

--> a 태그 부분을 클릭하면 'a!'가 출력되는 것은 당연함

but 왜 다른 부분도 다 출력되는 것일까 ?

 

이벤트 버블링 (아래 -> 위)

 

--> stop.Propagation() 사용으로 이벤트 버블링을 중단시킴

--> container 에 넣었으니 'body !' 는 출력되지 않음 !

 

이벤트 캡쳐링(위 -> 아래)

캡쳐링 먼저 발생하고 버블링 발생 (클릭하면 캡쳐링 발생해서 a까지 내려가고 그 다음 버블링 발생)

내려올 때는 eventListener가 반응하지 않고 올라갈 때 반응하는 것임

 

a 클릭 --> html 먼저 출력되게 만들고 싶을 때

, { capture: true, // html이 가장 먼저 실행됨 }

 

 

'click me !' 클릭하면 내려오는 과정에서 html 먼저 실행됨

--> 버블링 하면서 올라오다가 stopPropagation 있으니까 더 이상 올라올 수 없으니 body, window는 출력되지 않는 것 !

 

 

예제

'click me' 클릭 시 'I am a menu' 뜨게 만들기

 

but 이 코드를 추가하면 click me 눌러도 안 뜸

window.addEventListener("click", () => {
  if (menuEl) {
    menuEl.style.display = "none";
  }
});

 

--> a 요소를 클릭하면 menu가 표시되는데 클릭 이벤트는 window에도 전파되므로, window의 클릭 이벤트 리스너가 실행되어 menu를 다시 숨김. menu가 짧은 시간 동안만 표시되고 바로 사라지기 때문에 우리가 화면에서 볼 수 없는 것 !

--> stopPropagation() 사용해서 클릭 이벤트가 a 요소에서 멈추고 window로 전파되지 않게 해야 함

 

 

네트워크 통신 - HTTP 메소드

 

서버와 클라이언트 간의 데이터 전송을 위해 사용되는 메서드

 

1. POST

서버에 데이터를 보내서 새로운 리소스를 생성하거나 서버의 상태를 변경하는 데 사용됨

클라이언트는 서버에 데이터를 포함하여 요청을 보내고, 서버는 이 데이터를 처리하여 새로운 리소스를 생성하거나 기존 리소스를 수정

 

2. GET

서버에서 데이터를 요청하여 조회하는 데 사용

클라이언트는 서버에 요청을 보내고, 서버는 요청된 데이터를 응답으로 반환함.

GET 요청은 서버의 상태를 변경하지 않음

 

3. PUT

서버에 데이터를 보내서 지정된 리소스를 업데이트하거나 리소스가 존재하지 않을 경우 새로 생성하는 데 사용

클라이언트는 서버에 데이터를 포함하여 요청을 보내고, 서버는 이 데이터를 처리하여 리소스를 업데이트하거나 생성

 

4. DELETE

데이터베이스에서 데이터를 삭제하는데 사용

 

REST(ful) API

웹 서비스를 설계하는 방식 중 하나로, REST(Representational State Transfer) 원칙을 따르는 API를 의미

 

1. 자원(Resource):

• 모든 것은 자원으로 간주됨 (ex. 사용자, 게시물, 상품 등)

• 각 자원은 고유한 URI(Uniform Resource Identifier)로 식별됨.

-->사용자 자원은 /users, 특정 사용자 자원은 /users/1과 같이 식별

 

2. HTTP 메서드:

• RESTful API는 HTTP 메서드를 사용하여 자원에 대한 작업을 정의함

• GET: 자원 조회

• POST: 새로운 자원 생성

• PUT: 기존 자원 업데이트

• DELETE: 자원 삭제

 

3. 표현(Representation):

• 자원은 다양한 형식(JSON, XML, HTML 등)으로 표현될 수 있음. RESTful API는 주로 JSON 형식을 사용함.

 

4. 무상태성(Stateless):

• 각 요청은 독립적이며, 서버는 요청 간의 상태를 저장하지 않음. 클라이언트는 필요한 모든 정보를 요청에 포함시켜야 함

 

cf. 일반 API와의 차이점

API란 ?
일반적으로 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)를 의미하며, 다양한 형태의 시스템 간 상호작용을 정의하는 규칙과 도구의 집합을 나타냄

일반 API: 특정 규칙과 프로토콜에 따라 두 소프트웨어 간의 상호작용을 정의

REST API: 특정한 원칙과 제약 조건을 따르는 API 설계 방식 중 하나. REST는 Representational State Transfer의 약자로, HTTP를 기반으로 한 자원 중심의 아키텍처 스타일을 나타냄

	일반 API	REST API
설계원칙 및 제약조건	특정 설계 원칙이나 제약 조건을 반드시 따르지 않아도 됨	특정 설계 원칙이나 제약조건을 따라야 함
프로토콜	다양한 프로토콜 사용 가능	주로 http/https 사용
데이터 포맷	사용되는 프로토콜에 따라 다양한 포맷 사용 가능	주로 JSON, XML, HTML 등의 포맷을 사용
메서드 및 동작	특정 프로토콜에 따라 정의됨	HTTP 메서드를 사용하여 자원을 조작

 

** RESTful 하다 --> 암묵적 약속을 잘 지켜서 개발된 API

 

---

 

* 개발은 대문자 소문자를 엄격하게 구분함
대소문자 바꾸기(main -> Main) 빌드될 때 인식안되는 경우도 있음
일단 main과 다른 글자를 만들기(ain.txs) --> 그 다음 대문자 추가(Main.tsx) => 이렇게 하면 제대로 인식됨

* onClick --> 커스텀 속성(카멜케이스로 만들어진 속성 = 리액트에서 만들어진 속성)
html의 표준 속성 --> onclick=""

* 좋은 코드는 읽기 쉬운 코드 !

* 에러메세지 발생했을 때 꼭 읽어보기

 

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN

https://www.youtube.com/watch?v=fB3MB8TXNXM