코딩앙마 React공부(json-server, REST API)

 

영어 뜻밖에 없는데 뜻보기, 숨기기, 삭제, 체크박스를 만들어 보자

 

이렇게 체크박스를 하나 만들어 주고

버튼도 만들어준 뒤에 클래스를 넣어준다.

 

버튼 이벤트처리를 만들어보겠습니다.

 

별도의 컴포넌트를 만들어서 하겠습니다. (컴포넌트별로 state를 가지고 있기 때문에 뜻이 나타났다 없어졌다 하는 건 이 단어에만 해당하는거기 때문에 따로 컴포넌트를 생성해서 하는것입니다.)

 

Word.js 컴포넌트 생성

단어를 의미하는 부분을 Day.js에서 잘라서 붙여넣어준다.

 

현재 word가 없기때문에 Error가 발생한다. word는 props로 가정된다.

 

Word.js

 

방금 만든 word컴포넌트를 반복해서 찍어준다.

그다음 props로 word를 전달해주면 된다. (key는 word.id가 고유한 값이기에 그 값을 넣어준다)

 

 

 

word에서는 key값이 필요없기에 지워준다.

 

이런 에러가 떳다.

 

해결방법 = import가 안되어서 못찾는것 같으니 import를 시켜준다.

 

 

오류해결 -완-

 

이제 버튼 기능 구현을 해보겠습니다

 

일단, state가 필요하다.

isShow라고 상태값을 하나 만들고, 초기값은 false로 부여한다.

그리고  isShow일때만 뜻이 보이게 해준다.

 

 

그 다음 버튼을 눌렀을 때 실행 되어야 할 함수를 만들어보자

 

toggleShow()라는 함수로 생성하여 isShow의 반대값으로 만들어주면 된다.

 

Word.js

 

Word.js

테스트를 해보면 잘되는 것을 확인할 수 있다.

 

이번에는 체크를 했을때 아직 못외운 단어랑 구분될 수 있게 만들어준다.

 

 

첫번째 단어의 isDone을 true 로 바꿔준다.

 

체크가 되면 off 아니면 빈문자열 삽입

 

이제 체크를 해보면 동작이 안될건데 어떤 액션을 취하더라고 checked가 항상 값이 고정이라 읽기전용이라 다를바가 없다.

그래서, onChange를 추가해서 반응을 만들어보겠습니다.

 

마찬가지로 state를 이용하여 코드를 작성하면됩니다. (로직은 똑같다)

 

다음으로, 사용자 액션에 따라서 데이터를 읽고, 쓰고, 업데이트하고, 삭제하는 방법을 알아보자

 

그러기 위해서는 DB를 구축하고 API를 만들어야한다. json-server를 이용하여 RESTful API를 만들어보겠습니다.

 

프론트 공부를 하다보면 제일 귀찮은 일이 API를 만드는 것이다.  쉽게 하기 위해 json-server를 사용하는것

 

 

터미널에서 npm install -g json-server로 설치해준다.

 

설치가 완료되면 json-server --watch 경로 --port 3001 를 적어준다.(경로 = ./src/db/data.json)

 

localhost:3001/days 이 주소로 들어가보면 데이터가 나온다.

localhost:3001/words로 들어가면 단어 데이터가 나온다.

 

REST API에 대해서 간단하게 설명하자면

uri주소와 메서드로 CRUD요청을 하는 것이다.

 

Create : POST

Read : GET

Update : PUT

Delete : DELETE