본문 바로가기

전체 글

(47)
8] React Event처리 1. State변경과 render함수 현재 상태는 위와 같다. 먼저 설계(?)를 해보자면, -제일 위에 위치한 WEB에 링크를 달아서 링크가 눌리면 밑에 Content컴포넌트에 Welcome이라는 텍스트가 뜨게 할 것 -TOC에서 각 항목을 누르면 해당하는 내용을 Content컴포넌트에 보여줄 것 먼저 우선적으로 링크를 달 것이다. Subject.js에서 먼저 링크를 달아준다. 이 각 링크에 이벤트를 연결할 것이다. 링크를 누르면 App컴포넌트의 state가 바뀌고, Content의 props값으로 전달되면서 동적으로 앱이 바뀌는 것을 만들어 볼 것이다. 다음으로 state를 세팅해보자. 현재 페이지가 welcome페이지인지 read페이지인지 구분하기 위해서 state에 mode라는 값을 둘 것이다. m..
생활코딩 React3(Create) 필기 보호되어 있는 글입니다.
#6 Create 구현(~form) (필기) 모든 웹 어플리케이션은 CRUD에 의존한다. Create를 알아보자. mode를 바꾸는 방식으로 갈꺼임 URL에 /create를 붙이는 식이다. 컴포넌트를 만들고 onchangemode 핸들러를 만들고 라우팅된 각각의 링크들을 클릭했을 때 mode가 바뀌게 한다. /create에서는 props.onchangemode를 넣어서 명시한다. onChangeMode라는 이벤트는 mode(현재 상태)를 인자로 받는다. 이렇게 해서 mode가 바뀌게 된다. form은 정보를 전송하는 녀석이다. html과 똑같다. create 컴포넌트에 form을 넣고 기존에 하던 방식으로 input-submit 방식을 취하면 된다. 이 때 onSubmit 이벤트를 써서 submit이 눌렸을 때 기능을 구현한다. onsub..