sm 기술 블로그

DELETE는 크게 어렵지 않다. DELETE의 최종 코드를 한번 보자. ... 생략 ... function App() { ... 생략 ... else if (mode === 'READ'){ let title, body = null; for(let i=0; iUpdate { const newTopics = []; for(let i =0; i ; } ... 생략 ... return ( ... 생략 ... { event.preventDefault(); setMode('CREATE'); }}>Create {contextControll} ); } export default App; 실제로 추가된 부분은 contextControll = ... 생략 ... { const newTopics = []; for(let ..

Update는 Create와 Read를 합치기 때문에 CRUD중에 난이도가 가장 높다. 먼저 기존 코드 에서 전체 추가본을 보겠다. ... 생략 ... function Update(props){ const [title, setTitle] = useState(props.title); const [body, setBody] = useState(props.body); return Update { event.preventDefault(); const title = event.target.title.value; const body = event.target.body.value; props.onUpdate(title,body); }}> { setTitle(event.target.value); })}/> { setB..

CRUD(Create Read Update Delete)중에서 Read까지 진행했다. 이번에는 Create를 진행해보도록 하겠다. 생성을 하기 위해서는 Create 태그가 필요할 것이다. ... 생략 ... return ( ...생략 ... { event.preventDefault(); setMode('CREATE'); }}>Create ); } export default App; 다음과 같이 Create가 작동하는 태그를 작성하였다. 기본으로 동작하는 a태그의 기능을 막고 mode 를 CREATE를 집어 넣는다. ... 생략 ... function App() { // const _mode = useState('WELCOME'); // console.log("mode: ",mode); // console..

State 는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체이다. 따라서 State를 사용하면 자동으로 재랜더링 된다. const _mode = useState('WELCOME'); const mode = _mode[0]; const setMode = _mode[1]; useState는 배열을 return하고 그 안의 값은 초깃값으로 생각하면 된다. 배열의 0번째는 상태의 값을 읽을때, 1번째는 그 상태의 값을 변경할 때 사용하는 함수이다. 따라서 useStated의 초기값은 'WELCOME'이고, 이 useState의 0번째는 'WELCOME'을 읽어오고 1번째는 변화가 되었을 때 작동한다. 이를 콘솔로 찍어보면 다음과 같다. 이 것을 함축하여 작성하면 const [mode,setMode] ..