그 땐 Front했지/그 땐 React했지 (38) 썸네일형 리스트형 [생활코딩/React] 2022개정판 | 4. 컴포넌트 만들기 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 사용자 정의 태그 == 컴포넌트 사용자 정의 태그를 만들어보자! 💡리액트는 사용자 정의 태그를 만드는 기술이다 //App.js import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome Hello. WEB ); } export default App; 👉🏻일단 App.js 파일의 코드를 다음과 같이 수정한다. 이 코드의 return안에 코드가 1억줄 있다면?? 코드를 읽기 힘들고 유지보수도 매우 힘들.. [생활코딩/React] 2022개정판 | 5. props 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. props 사용하기 html에 속성을 넣는 것처럼 리액트 코드에서도 속성을 사용해보자! function App() { return ( ); } 👉🏻Header에 title이라는 props에 REACT라는 값을 넣어보자 function Header(props) { return( {props.title} ) } 👉🏻그리고 Header 컴포넌트에서 props로 인자를 받는다. 이 props를 활용하기 위해서는 중괄호로 묶어줘야 한다. function Nav() { return( html css js ) } 👉🏻그럼 이제 .. [생활코딩/React] 2022개정판 | 3.소스코드 수정방법 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 코드 수정 👉🏻index.js를 보면 을 render하고 있다. 👉🏻App.js로 들어가면 다음과 같은 코드를 render하고 있다. 이 코드를 수정해보자! 👉🏻내가 고친 코드대로 화면에 출력되고 있다! 2. 배포 npm run build 👉🏻이 명령어는 배포판을 만드는 명령어이다. 👉🏻build 폴더가 생겼다! npx serve -s build 👉🏻이 명령어는 build에 있는 index.html을 배포하는 명령어이다. 👉🏻이후 나오는 링크로 들어가면 개발환경 버전이 아니라 실제로 서비스할 수 있는 환경을 확인할 수.. [생활코딩/React] 2022개정판 | 2.실습환경 구축 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 다른 사람이 만들어준 리액트 실습 환경 사용하기 https://stackblitz.com/edit/react-fhagtd React (forked) - StackBlitz stackblitz.com 👉🏻이미 실습 환경이 구축된 곳이다. 실습 환경 구축이 어렵다면 위 링크로 바로 들어가 코딩하면 된다! 2. 리액트 실습 환경 내손으로 구축하기 https://create-react-app.dev/ Create React App Set up a modern web app by running one command. creat.. [생활코딩/React] 21.delete 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. delete 구현 //App.js 👉🏻받아온 _mode값이 'delete'일 때 삭제하는 코드를 짜자 window.confirm을 통해 다시 한 번 더 확인을 한다. 만약 '확인'을 눌렀다면 contents state를 복제한 리스트를 돌리면서 현재 선택한 리스트(selected_content_id)와 id가 같다면 splice를 이용해 삭제한다. mode state는 'welcome'으로 contents state는 아까 삭제한 리스트 _contents로 바꿔준다. 🐰length를 lentgh로 오타내서 10분동안 해맸다ㅜㅜ [생활코딩/React] 20.update 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. update 구현 내가 선택한 요소를 넘겨보자 //App.js getReadContent(){ var i = 0; while(i < this.state.contents.length) { var data = this.state.contents[i]; if(data.id === this.state.selected_content_id) { return data } i = i + 1; } } getContent(){ var _title, _desc, _article = null; if(this.state.mode === 'welcome') .. [생활코딩/React] 19.create 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 소개 📌CRUD: Create Read Update Delete 지금까지는 Read만 해왔기 때문에 나머지 CUD를 해보자! create 버튼을 누르면 TOC 부분에 리스트가 하나 더 생기는 기능을 만들것이다! 2. mode 변경 기능 //Control.js import React, { Component } from 'react'; class Subject extends Component { render () { return ( create update ); } } export default Subject; 👉🏻create, upda.. [생활코딩/React] 17. 컴포넌트 이벤트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 컴포넌트 이벤트 만들기 1 //App.js return ( ); 👉🏻Subject component에 onChangePage라는 이름의 이벤트를 만들어 props로 전달한다. 이 이벤트를 실행하면 이벤트에 설치한 함수를 호출한다. //Subject.js class Subject extends Component { render () { return ( {this.props.title} {this.props.sub} ); } } 👉🏻Subject component에서 onChangePage 이벤트(이벤트가 컴포넌트로 넘어올 때는 함수의 .. 이전 1 2 3 4 5 다음
