WEB44 [React] 마지막 정리 immutable 불변. 구현을 단순하게 유지하기 위함. 너무 높은 변경가능성을 방지하기 위한 노력이다. 객체를 immutable하게 다루기위한 여러 라이브러리들이 있다. 대표적: immutable.js - 배열, 객체의 대체제로 사용가능 - 모든 연산을 원본을 변경하지 않고 복제된 것을 return - react와 단짝 router 우리의 웹 어플리케이션은 하나의 url로 모든 페이지를 다루고 있음 페이지 전환을 할 때 마다 네트워크 로딩을 하지않음 url 만으로 페이지를 찾아올 수 없다는 단점이 있다. url에 따라서 다른 UI가 나오게 할 수 있는데 이것을 도와줄 도구가 있다. 대표적: React Router - url에 따라서 적당한 컴포넌트를 실행시킬 수 있다. - url로 접근하는 사용자에게는.. 2021. 10. 16. [React] Delete 구현 create, update까지 구현을 해봤다. 이제 여기서 목록 중 하나를 누르고 delete를 누르면 해당 컨텐츠를 삭제하고 싶다. Delete 버튼은 control 컴포넌트 안에 있다. 안을 보면 input 태그에 delete 버튼이 있고 onChangeMode라는 props 를 호출하고 있다. 우리는 _mode가 delete로써 onChangeMode가 호출된다면 삭제 operation이 시작된 것을 알 수 있다. 삭제기능 구현하기 삭제할 때 진짜 삭제하냐고 물어보도록 confirm을 사용할 것이다. 삭제하려는 contents_id와 일치하면 삭제하고 삭제가 되었다는 alert를 띄워준다. 2021. 10. 16. [React] Update 기능 구현, 리팩토링 우리가 만들 Update는 이미 쓰여진 목록을 골라서 desc를 수정하는 동작을 할 것이다. 우선 Update 기능을 구현할 js 파일을 CreateContent 파일을 복사해서 만들고 h2 태그만 update로 바꿔주었다. 그리고 updatecontent 컴포넌트가 실행될 떄 입력 값으로 contentd id를 주입시켜줄 것이다. form 제어하기 props 데이터는 read only이다. value 값으로 지정해버리면 react가 나서서 막아버린다. 그래서 입력창의 글씨를 바꾸려고 하면 오류가 난다. value값으로 컴포넌트 안에서 가변적인 데이터, state화를 시켜줘야 한다. 그리고 value 값을 수정할 수 있도록 input 값을 바꿨을 때 state 값을 바꿔줘야 하는데, 여기서 onChang.. 2021. 10. 12. [React] 성능개선을 좀 더 편하게하기 (create) 저번에 한 것까지는 안되는 건 아니지만 나중에 성능개선을 하려고 할 때 까다로워질 수 있다고 한다. 좀 더 좋은 방법을 알아보았다. 저번 코드 배열에 데이터를 추가하는 방법은 두 가지가 있다. 1. push : 오리지널 데이터가 바뀐다. 2. concat : 오리지널 데이터에 추가가 된 배열을 return한다. 무슨 차이냐하면!! push는 아예 원래 배열에 3을 추가하지만 concat은 원래 배열에 3을 붙여 반환하고 result에 넣어서 찍어보면 123, 원래배열인 arr2를 찍어보면 12가 나온다. state에 값을 추가할 때는 push와 같이 오리지널 데이터를 변경하는 것을 쓰지 않는게 좋다. concat처럼 오리지널을 변경하지 않고 새로운 데이터를 추가하는 것을 사용하자. create를 끝냈으니.. 2021. 10. 11. 이전 1 ··· 5 6 7 8 9 10 11 다음
