일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- prj
- 비동기
- callback
- JS #프로젝트
- setTimeout()
- Project
- json
- slow and steady
- await
- Import
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- async
- webpack
- https://m.blog.naver.com/tt2t2am1118/221010125300
- Porject
- js
- ajax
- 게임
- addEventListener
- execCommand
- 혼프
- 참고블로그
- mysql
- db
- promise
- eport
- sql
- 동기
- database
- object
- Today
- Total
목록⚛️React (46)
C-log
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cE2dcJ/btsDs2tukoi/IFPupI4EeTDkfweVweV3q0/img.jpg)
이번 시간에는 props를 사용할 것이다. props는 우리가 직접 설정한 값을 함수로 가져와서 변형하고 응용해서 다시 값을 넘겨주는 역할을 한다. 기본적인 형태만 보아서는 단순해 보이지만 응용했을 때는 복잡하고 머리아프다. 따라서 props의 역할과 props를 응용했을 때 어떻게 사용될지를 생각하면서 해당 수업을 들으면 더 질좋은 강의 시간이 될 것이다. 아래 코드를 살펴보자 *App.js import Class_App from "./section/section08/Class_App"; function App() { return ( ... *Class_App.js import { useState } from "react"; function Class_App( props ) { const [name, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mRMpo/btsDyz4LDRW/JSvrV4BZ14aIhDewikMOLK/img.jpg)
마지막으로 우리는 Delete를 구현할 것이다. 그러기 위해서는 기존에 update부분에서 delete를 추가할 것이다. 이전에는 a태그를 사용했지만 이번에는 우리가 페이지를 새로 생성하거나 불러오는 것이 아니기때문에 input태그로 버튼을 구현 할 것이다. 따라서 contextControl변수에서 값을 수정하면 된다. 아래 코드를 살펴보자. contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update { const newTopics = [] //비어있는 배열 값을 넣어준다. for (let i = 0; i 이 태그는 비어 있는 태그이지만 update와 delete태그들을 묶어주기 위함이다. 이에 따라서 onClick함수를 보면 newT..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lm9oa/btsDxzJRu7Z/bKTmgtpdoeLoRHSVqvKSE0/img.jpg)
React Hook API중 상태를 관리하는 useState를 알아보려고 한다. 상태값을 전달해서 해당 상태의 값의 변동으로 React가 웹 브라우저를 랜더링 시킬 수 있다. useState를 활용해서 다양한 형태의 코드를 살펴 보려한다. 우선 내가 작성한 useState는 아래와 같다. import { useState } from "react"; function Class_App() { const [name, setName] = useState("Mike"); function changeName() { if (name === "Mike") { setName("Jane") } else if (name === "Jane") { setName("Mike") } } return ( state {name} Ch..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lZWOR/btsDqNJEQlJ/gTmxrKkiaAgqiEVhVW6MMk/img.jpg)
이번 시간에는 Update를 하는 방법을 배울 것이다. 포스팅을 하기 앞서 우리는 id값을 전달 받고 있는 Nav컴포넌트를 명확하게 파악해야한다. 그래서 Nav 컴포넌트를 다시 한번 짚어보고 Update 포스팅을 할 것이다. 아래 Nav컴포넌트를 살펴보자. function Nav(props) {//리스트 const lis = [] for (let i = 0; i {t.title} ) } return {lis} } function App() { ... const [topics, setTopics] = useState([ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css is..' }, { id: 3, title: '..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cBnACq/btsDqRqODbE/LbUkaUWscTtdIaTubnOC6K/img.jpg)
이번 수업에는 Create컴포넌트를 생성할 것이다. Create컴포넌트를 사용하기 위해서는 props와 useState를 잘이해해야한다. useState는 현재의 상태를 컨트롤 할 수 있는 역할이다. 우선 App컴포넌트를 살표보자 function App() { //조작하고 있는 장치 const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); const [nextId, setNextId] = useState(4); const [topics, setTopics] = useState([ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mwvkV/btsDngrGxTB/3MVOhKatIkSwWSBNl55vyK/img.jpg)
이번 시간에는 event함수를 중점으로 react에서 어떻게 구동시키고 어떻게 구성하는지 알아보려고 한다. 우선 함수를 생성하기 전에 App 컴포넌트를 참고하자. function Class_App() { return ( App.js show name show age { const txt = e.target.value; usedText(txt) }}> ); } export default Class_App; 위의 각 태그들에 onClick속성을 사용해서 함수를 불러오고 있다. onClick뿐만 아니라 onChange를 통해서 즉각적으로 값이 변동될 때 마다 함수를 호출하는 속성도 사용하고 있다. 함수를 호출하는 것은 그리 어렵지 않다. 다만 두 번째 input태그를 보면 화살표기법을 사용했다는 것이다. 아래..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/z1aM1/btsDql6fc2v/h93Qvuc4v30DONyyjTT36k/img.jpg)
기존에 있던 Start! React를 다시 작성하려고 한다. 해당 포스팅은 유튜브 코딩앙마 수업을 다루고 있으며 해당 강의 링크는 아래와 같다. React js 강좌 www.youtube.com다시 작성하게 된 이유는 과거에 작성한 글의 미흡한 점과 js의 전반적이 지식의 부족으로 포스팅의 글이 단단하지 않다고 느껴진 것이다. 현재는 기존 ⚡ver.0 였던 카테고리는 비공개로 전환이 되면서 생활코딩의 React 포스팅이 ⚡ver.0로 변경된 상태이다. 현재의 포스팅은 ⚡ver.1이다 좀 더 질좋은 글을 작성하려 노력할 것이다.