react onChange / if 조건문 수정 / 통신과 API

 1. if 조건문 간단하게 정리하기

지난번에 작성한 게시물에서 두가지를 보완해야 할 것 같다.

 

우선 1번 if 조건문 간단하게 정리해야한다

아래 사진은 작성자, 비밀번호, 제목, 내용에 빈칸이 있을경우 경고문으로 알려주는 코드이다.

 

말 한마디로 설명할 수 있는 부분을 거의 50줄 가까이 작성하면서 '이게 맞나...' 싶었는데 역시 아니였다.

처음 작성한 경고문 안내

하나의 if 문으로 작성하려고 하다보니 이렇게 길어졌다.

물론 안에서 경우의 수에 따라 경고문이 나오지 않는 것도 발견했다......

 

위 코드는 8줄로 끝낼 수 있었다...😂

함수 안에 if 문을 중복해서 사용 할 수 있다는 것을 잘 활용하면 좋을 것 같다.

또한 여기서 if (조건문) {} 에서 "조건문"은 true이면 해당 코드를 실행한다. 

 

if가 인식하는 false 는

-1, "", false, null, undefined, NaN 이며, 나머지는 모두 true를 활용하면 코드 길이를 줄일 수 있을 것 같다.

 

코드가 잘렸지만 !name 은 name에 아무런 값도 입력 되지 않을때 true를 반환한다.

 

2. onChange 활용

이전에 onChange는 even 함수로 value값을 불러와 name을 수정해주는 일만 했었다.

때문에 버튼을 한번 클릭하면 에러 메세지가 지워지지 않았다.

 

 

그래서  if 문을 추가했다. 

변경 전

변경 후

이렇게 작성하면 버튼을 눌러 경고문이 나왔을때, 

input 내용을 추가하면 버튼을 누르지 않아도 경고문이 사라지는 것을 볼 수 있다.

 

3. 통신과 API

 

기본적으로 통신은 요청과 요청에 대한 응답이며,

우리가 주로 사용하는 통신자료는 HTTP(텍스트/하이퍼텍스트)이다.

 

이론적인 부분은 아래 이미지로 쉽게 정리 되었다.

API 종류는 두가지(REST, GRAPHQL)이 있으며,

GRAPHQL이 최신 기능으로 원하는 것만 "골라서" 받을 수 있다는 점이 특별하다.

 

결국은 백엔드 개발자가 만든 API에 요청을 보내고,

내가 갖고싶은 자료를 불러오거나 수정하는 것으로 이해하면 좋을 것 같다.

 

API 요청 연습

mutation (추가, 수정, 삭제)

빨간색 : 조회( query)인지 추가,변경,삭제(mutation) 인지 확인

초록색 : 무엇을 어떻게 할 것인지 

파란색 : 추가, 변경, 삭제 할 내용

주황색 : 조회 값

 

* query도 동일한 방식으로 "조회" 할 수 있다.

 

결국 graphql도 만들어진 이름을 보고 무슨 행동을 할지 파악할 수 있고,

가독성이 좋지 않아 이해가 안되는 것은 백엔드 개발자에게 수정을 요청 할 수도 있다고 한다.

 

또 작성할때 주의해야 할것은 () 인지 {}인지,

키 값이 String인지 Int인지 확인 해야하며 필수 항목도 확인해야한다.

 

괄호까지 넣었는데 무엇이 있는지 확인하기 번거로울때는 

단축키 shift + space 를 누르면 리스트와 value 타입도 확인 할 수 있다.