일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 한글 공부 사이트
- 파이썬 enumerate
- 파이썬 for
- 타입스크립트 props
- 파이썬 반복문
- JavaScript
- 그리드 정렬
- 자바스크립트
- 리액트 팀 프로젝트
- Next 팀 프로젝트
- 리액트
- React Hooks
- useState
- 파이썬 list
- 코딩테스트
- 타입스크립트 리액트
- 리액트 훅
- REACT
- 내일배움캠프 프로젝트
- 프로그래머스
- 내배캠 프로젝트
- 내일배움캠프
- 내일배움캠프 최종 프로젝트
- js
- 리액트 프로젝트
- 파이썬 for in
- 타입스크립트
- 파이썬 slice
- typeScript
- 리액트 페이지 이동
- Today
- Total
목록리액트 (19)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Zqu0/btsDLspHIHL/7RNxosRZmgZ2gpsQ2OK8pk/img.png)
🤤 리액트로 리스트를 만들어보자~ html 작성법과 같이 ul 과 li 로 작성! class 는 className 으로 쓴다. import React from "react"; import "App.css"; function App() { return ( 감자 고구마 당근 가지 애호박 ); } export default App; .ul-style { margin: 0; padding: 20px; list-style: none; display: flex; justify-content: space-between; } .li-style { width: 100px; height: 100px; border: 1px solid red; border-radius: 10px; display: flex; justify-c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c1Bc6x/btsDEioCyeF/UQsW0UKqYOlqCVkYSZBQUK/img.png)
💡 props 는 반드시 위에서 아래 방향으로 흐른다. 부모 ➡️ 자식 (단방향) 💡 props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다! import React from "react"; function Son() { return 나는 아들이야!; } function Mom() { const name ="사모님"; return ; } function Grandfa() { return ; } export default function App() { return ; } Mom 의 name 을 Son 에서 쓰고 싶다면? props 로 값을 전달한다! import React from "react"; function Son(props) { console.log(props); // {motherName:..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/s1bGz/btsDIuupisr/dyFh9mFA69U0dN41zlykGK/img.png)
💡 다른 파일을 import 해서 가져올 때 경로를 ../ 이런 식(상대 경로)으로 들어가지 않고 그 파일의 이름으로 바로 불러올 수 있도록 절대 경로를 설정할 수 있다! 이렇게 ~ 방법은 1. 먼저, 최상위 폴더(root 경로)에 jsconfig.json 파일을 만들어준다. 2. 그리고 파일 안에 아래와 같이 작성 src 폴더 내 파일들은 절대 경로로 작성할 수 있게 된다! 3. 수정할 파일로 들어가 절대 경로로 파일명 수정! 4. 그럼 에러가 발생하는데 다시 npm start 를 해주면 정상적으로 작동된다. ✳️ 이런 식으로 파일을 불러오는게 필수적인 건 아니니 때에 취사선택해 사용하자.