전체 글(26)
-
8. UPDATE
https://www.youtube.com/watch?v=bW_WOrYzVWw&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=9 C R U D에서 U를 구현할 시간이다. U는 C와 R을 합친 것이다. 그래서 C와 R코드를 참조하면 쉽게 만들 수 있다. 일단 update 링크를 'READ' 모드일 때 나타나게 한다. eles if (mode === 'READ') //... contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update //... { event.preventDefault(); setMode('CREATE'); }}>Create {contextControl} mode가 'UPDATE'일 때 동..
2022.07.29 -
7. Create
https://www.youtube.com/watch?v=kctNCMFxciQ&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=8 리액트를 이용하여 CRUD를 할 것이다. R은 이미 했으니 C U D를 앞으로 구현할 것이다. 1. create 링크 만들기 //App.js { event.preventDefault(); setMode('CREATE'); }}>Create 링크를 만들기 위해서 a태그를 이용하였고, 기본 동작을 막기 위해 event.preventDefault(); 를 해줬다. setMode를 통해 링크를 누르면 mode 값이 'CREATE'로 바뀌게 해줬다. 2. function Create 만들기 //... function Create(props) { ret..
2022.07.29 -
6. state
https://www.youtube.com/watch?v=vmunrKR0uOU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7 1. state의 개념 컴포넌트는 입력은 prop이고 이것을 우리가 만든 함수에서 처리해서 return값을 만들면 이 return 값이 새로운 ui를 만든다. prop과 마찬가지로 return 값을 바꾸는 변수가 바로 state 이다. 2. prop과 state의 차이점 props은 컴포넌트를 사용하는 외부자를 위한 데이터 state는 컴포넌트를 만드는 내부자를 위한 데이터 3. state 사용법 3-1. mode 값 바꾸기 mode 라는 변수를 통해서 'Welcome' 이라는 문구와 'Read' 라는 문구를 띄우고 싶다. Header를 클릭..
2022.07.28 -
5. event
https://www.youtube.com/watch?v=s3cDPbcoy_4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=6&t=1s 1. Header 클릭 시 경고창 띄우기 function App() { const topics = [ {id:1, title:'html', body:'html os ...'}, {id:2, title:'css', body:'css os ...'}, {id:3, title:'js', body:'js os ...'}, ] return ( ); } onChangeMode 라는 prop에 파라미터로 함수를 넘긴다. 헤더 컴포넌트 안에서 컴포넌트가 함수를 호출해서 헤더를 클릭했을 때 해야하는 작업을 실행하게 한다. function Header..
2022.07.28 -
4. props
https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5 저번 포스트에서 컴포넌트를 만들었다. 컴포넌트는 props라는 파라미터를 받을 수 있다. 컴포넌트에 파라미터로 넘기는 props의 이름은 아무렇게 지어도 되지만 일반적으로 "props"라고 이름을 정한다고 한다. //App.js function App() { const topics = [ {id:1, title:'html', body:'html os ...'}, {id:2, title:'css', body:'css os ...'}, {id:3, title:'js', body:'js os ...'}, ] return ( ); } 각 컴포넌트 뒤..
2022.07.27 -
3. 컴포넌트 만들기
https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4 리액트는 사용자 정의 태그를 만드는 기술이다. //App.js import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome Hello, WEB ); } export default App; 이런 복잡한 코드를 사용자 정의 태그로 깔끔하게 만드는 것이 리액트다. 사용자 정의 태그를 만들 때는 함수를 정의하면 된다. 예전에는 class를 만들어서 사용했다고 하는데 요즘은 함수를 만들어서 사용한다고 한다. 리액트에서 사용자 정의 태..
2022.07.26