sm 기술 블로그

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] ..

어떤 이벤트가 발생했을 때 어떤 작업을 처리하는 일 import './App.css'; function Header(props){ return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } ... 생략 ... function App() { ... 생략 ... return ( { alert('Header'); }}> ); } export default App; 먼저 상위 컴포넌트 부터 확인해보자. onClick의 이벤트가 발생하면 , event.preventDefault(); props.onChangeMode(); 다음과 같은 함수가 실행된다. event.preventDefault()는 a태그의 이벤트를 막는다는 의미이다. props..

props란? properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달할 때 사용한다. (상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용한다. - 단방향 데이터 흐름) props 는 자식 입장에서 수정할 수 없고 읽기 전용이다. 1. 기본구조 //app.js ... 생략 ... function Header(props){ return {props.title} } ... 생략 ... function App() { return ( ); } ... 생략 ... 3강에서 컴포넌트를 이용하여 작성하는 방법을 배웠다. 컴포넌트를 쓰기 위해 함수를 정의하는데 함수의 매개변수 란에 props를 명시해줌으로써, props 사용이 가능해 진다. 하위 컴포넌트에서 title은 WEB이라는 값을 주었다. 그 ..