Coding Feature.

CRUD Create Read Update Delete 먼저 Create 링크를 클릭하면 모드가 create 모드로 바뀌어 UI가 변경되는 것을 구현. { event.preventDefault(); setMode('CREATE'); }}>Create 그리고 else if(mode === 'CREATE'){ content = } 를 추가. 이때 content 내용이 많으므로 Create 컴포넌트를 새롭게 코딩. 이라는 html 태그를 이용할 것. form 태그는 서버에 사용자 입력 정보를 전송할 때 사용된다. 아이디 : 비밀번호 : 주소 : 이때 input type이 password인 경우, 글자 대신 **과 같은 별이 보인다. input type이 submit일 때, 제출 버튼이 생성된다. action=..

prop과 달리, state는 컴포넌트를 만드는 내부자를 위한 데이터. 먼저 import {useState} from 'react' 임포트 시킨다. const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); 상태로 사용을 위해 위와 같이 useState 함수에 'WELCOME'과 같은 초기값을 인자로 전달하여 사용한다. 이때 useState는 배열을 return하는데 index0은 상태값을, index1은 상태값 변경 위한 함수를 return해준다. const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'..

만약 사용자가 정의한 컴포넌트에서 alert 이벤트를 실행할 수 있도록 하고 싶다면, 로 작성하여 onChangeMode에서 function을 옮겨주고, function Header(props){ return {props.title} } 작성. 이때 onclick으로 쓰지 않고 onClick과 같이 대문자인 이유는 유사 HTML이기 때문에 React는 onClick으로 작성해야 하기 때문. event.preventDefault()는 태그의 기본 동작을 막고(리로드 방지), props.onChangeMode()로 함수를 실행한다. function(event) 대신 (event)=> 또는 event=>로 변경가능. (인자가 하나 밖에 없다면 괄호도 생략 가능) 만약, const topics = [ {id:1..

props 란 컴포넌트의 입력값(속성). WEB을 속성값으로 컴포넌트에 넘겨주고 싶다면 function Header(props){ return {props.title} } 함수 인자를 props로. (대부분 props라고 작성.) props는 객체. 이때 props.title을 '{', '}'로 감싸줘서 사용. 예를 들어 html css js 과 같이 리스트 작성 시, 먼저, const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] topics 배열을 선언, id, title, body 정..