분류 전체보기69 [React] 수업 1 1. vscode 꿀팁 1-1. vscode에서 rfce로 자동완성을 할 수 있다. 1-2. ES7+ React/Redux/React-Native snippets를 설치하면 코드를 자동 완성할 수 있다. 2. 수업내용 2-1. props import First from './components/First'; function App() { return ( ); } export default App; import React from 'react' function First({name, number}) { return ( 이름은: {name}, 숫자는 {number} ) } export default First props.name 보다 객체구조분해로 받아오면 프롭스로 주는 것이 몇 개인지!! 틀을 재활용하기 .. 2022. 7. 27. [React] study day3 1. 스터디 220726 💑 좋았던 것(Liked) : 부족했던 기본개념을 배우고 넘어가는 시간이었다. 🌟 배운 것(Learned) : 안다고 생각하고 넘어갔던 라우터 개념과 사용자 form입력의 기본적인 부분을 배웠다. 💦 부족했던 것(Lacked) : 스터디를 2번나 빠지면서 ㅠㅠㅠ 스터디 진도와 너무 멀어졌다.ㅠㅠㅠ 🌻 바라는 것(Longed for) : 빨리 기본개념을 익히고 스터디진도에 맞춰야겠다!!! 2022. 7. 26. [React] 간단한 사용자 입력 form 만들기 (useRef) 1. label태그의 htmlFor label 태그와 input요소를 사용해서 사용자 입력 폼을 만드는데, htmlFor이 나왔다. 잘 이해가 가지 않아서 공식문서를 살펴보니 다음과 같이 한 줄 나와있고 끝이었다. htmlFor: for는 JavaScript에서 예약어이므로 React 엘리먼트는 htmlFor를 대신 사용한다. label 요소에서 왜 for을 사용하는 거지.??!!! 처음에는 반복문인가..? 했는데 찾아보니 역시 다른 거였다. 간단한 label요소에 대한 설명은 다음 글을 참고했다. (1-1. HTML Tag, label for란?, 1-2 class와 for 속성 ) 1-1. js에서 label for 사용법! label요소의 for에는 input의 id와 같은 값을 넣어줘야한다. St.. 2022. 7. 26. [React] props.children 사용하기!! VueJs에서 slot이 있었던 것처럼!!! React에는 props.children이 있다. 간단한 예시를 보면, Layout.js이다. import MainNavigation from './MainNavigation'; import classes from './Layout.module.css' function Layout(props) { return {props.children} } export default Layout; {props.children}가 있는 main태그 속에 사이에 있는 코드들이 표시된다!! Layout을 사용한 App.js코드는 다음과 같다. import { Routes, Route } from 'react-router-dom' import AllMeetupPage from '... 2022. 7. 25. 이전 1 2 3 4 5 6 7 ··· 18 다음
