해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
결과창
현재 창은 단어와 단어뜻만 존재한다.
단어뜻 숨기기 버튼, 삭제 버튼, 체크박스를 만들어보자.
Day.js
input 태그 로 checkbox 를 추가한다.
button 태그 로 뜻 보기, 삭제 버튼을 생성한다.
결과창
Day.js
뜻보기 버튼을 누르면 뜻이 보였다가 안보이는 기능을 구현해보자.
해당 기능을 구현하기 위해서는 별도의 컴포넌트를 추가해 구현하는 것이 더 좋다.
컴포넌트마다 state 를 가지고 있다.
버튼을 눌러 뜻이 보이는 것은 그 단어에만 해당하는 일이니까 따로 컴포넌트를 제작하는 것이 더 좋다.
Word.js
Word 컴포넌트를 생성한다. 해당 코드를 Word.js 에 추가한다.
Day.js
생성한 Word 컴포넌트를 반복해서 찍어준다. → map() 내부
props 를 word 에 전달해준다.
word.id 가 고정값이니 key 로 사용한다.
Word.js
버튼의 기능을 구현해보자. 일단 state 가 필요하다.
구현하고자 하는 내용은 뜻이 보였다가 숨겨졌다 하는 것이니까 isShow 라는 상태값을 만든다.
초기값은 false 로 설정해 처음에는 뜻이 보이지 않도록 한다.
isShow 와 단어의 뜻을 보여주는 코드에 and 연산을 한다. → false 면 뜻이 보이지 않음
결과창
Word.js
버튼을 눌렀을 때, 실행되야 하는 함수를 만들어보자.
toggleShow 함수를 생성해, isShow 의 반대 setIsShow 를 만든다.
isShow 가 참이면 setIsShow 는 거짓이 되고, isShow 가 거짓이면 setIsShow 는 참이 된다.
뜻 보기 버튼에 onClick 이벤트가 생기면 toggleShow 함수가 실행되도록 설정한다.
결과창
Word.js
뜻 숨기기, 뜻 보기 로 버튼 누를때마다 문구가 바뀌게 설정한다.
결과창
Word.js
체크 표시를 했을 때, 체크 하지 않은 단어와 한 단어 사이에 구분을 둬보자.
data.json 을 보면, isDone 이라는 불린값이 있다.
isDone 이 false 이면, 해당 단어를 아직 못 외웠다는 뜻으로, 체크 표시를 해제하도록 한다.
data.json
isDone 을 true 로 설정하고 결과를 확인해보자.
결과창
Word.js
tr 에 체크표시가 되면 off 라고 클래스를 넣어보자.
결과창
book 이 off 되었다.
근데 apple 에 체크박스가 체크표시 동작이 안된다.
에러 발생
onChange 핸들러가 없으면, read-only 이다.
어떤 액션을 취하더라도, cheked={word.isDone} 으로 값이 고정되어 있어서 읽기 전용과 다를바가 없다는 의미이다.
onChange 를 추가해서 반응하도록 만들어보자. → isDone 을 state 로 생성한다.
Word.js
이전의 isShow 와 같은 맥락으로 isDone, setIsDone 을 생성한다.
toggleDone 함수를 생성해, isDone 의 반대 setIsDone 을 만든다.
isDone 가 참이면 setIsDone 는 거짓이 되고, isDone 가 거짓이면 setIsDone 는 참이 된다.
체크 박스에 onChange 핸들러가 참 값을 받고, isDone 이 거짓이면 단어 숙지가 아직 되지 않은 상태다.
그 반대 상태는 단어 숙지가 되었다고 판단, 체크박스에 체크되면서 칸이 회색으로 변한다.
결과창
json-server, REST API
사용자의 정의에 따라 리액트를 쓰고, 읽고, 업데이트하는 방법을 알아보도록 하자.
그러기 위해서는 db 를 구축하고, api 를 만들어야 한다.
json 서버를 이용해서 REST API 를 만들어보자.
json 서버는 빠르고 쉽게 REST API 를 구축해준다.
npm 으로 설치 가능하며 작은 프로젝트에서도 사용가능하다.
json-server
global 로 json-server 를 설치한다.
지금 프로젝트의 포트는 3000번 이니까, 포트번호 3001번으로 설정하자.
주어진 주소에 접속해보자.
(http://localhost:3001/days) 접속페이지
(http://localhost:3001/words) 접속페이지
**REST API**
REST API 는 URL 주소와 메소드로 CRUD(Create Read Update Delete) 요청을 한다.
Create : POST
Read : GET
Update : PUT
Delete : DELETE
CRUD 는 각각 POST, GET, PUT, DELETE 메소드를 사용한다.
결과창은 GET 메소드로 읽은 것이다. → Read 에 해당한다.
주소를 DELETE 메소드를 호출해보자. 그럼 2번이 지워짐(Delete)
다른 메시지를 작성해서 PUT 을 호출하면 정보가 수정됨(Update)
해당 주소로 적절한 정보를 담아서 POST 를 날리면 새로운 정보가 만들어짐(Create)
?day=1 → 1일치에 해당하는 단어들이 결과로 출력됨
REST API 는 URL 만 보고도 어떤 요청인지 알수 있는 장점이 있다.
