이번에 경진대회를 나가게 되면서 React를 공부하고 이걸로 프로젝트를 하기로 했다. 수업을 듣다보니 저번 아이디어톤 때 구현 못한 부분을 React를 통해서 구현하면 거의 다 해결될 것 같다는 느낌을 받았다. 시간이 남으면 React로 바꿔보는 작업을 해봐야겠다. React를 써서 웹사이트를 구성하려면 DRF(Django Rest Framework)를 이용해야한다고 한다. 그냥 html, css 만들어서 장고로 배포하는 거랑은 좀 다르다고 한다. 일단 React가 어떻게 동작하는지는 알았으니 프로젝트 하면서 DRF도 공부해야겠다.

https://www.youtube.com/watch?v=OZPRKFqPWG4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=10 이제 C R U D의 마지막 D. Delete 차례다. Delete는 링크로 구성하면 안되므로 button으로 구현을 한다. contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update { const newTopics = [] for(let i=0; topics.length; i++) { if(topics[i].id !== id){ newTopics.push(topics[i]); } } setTopics(newTopics); setMode('WELCOME'); }} /> 조..

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'일 때 동..

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

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를 클릭..

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