목록Programing Language (77)
습관제작소

hook useState() userEffect() use___() useState() state : 함수가 끝나도 사라지지 않는 변수 컴포넌트의 데이터 저장소 한국어로 '상태' 라고 함 "state는 변한다" import {useState} from "react"; // 리엑트 라이브러리에서 제공 임포트해야함 import "/src/styles.css"; // 절대 경로 export default function App() { const [count, setCount] = useState(0); return ( App {count} setCount(count +1)}>plus ); } setState State 데이터는 오직 부모..App에서만 관리해야한다. App.tsx import {..
map() 함수 사용하여 prop 프론트엔듣에선 백엔드로부터 받을 데이터를 정확히 알고 있어야 한다. 컴포넌트를 반복할 때 map() 을 사용하고, key 를 달아준다. json 데이터 준비 { "data": { "students": [ { "id": 0, "name": "백성연", "age": 29, "isGirl": true }, { "id": 1, "name": "백", "age": 29, "isGirl": true }, { "id": 2, "name": "성연", "age": 29, "isGirl": true } ] } } tsconfig.json : "resolveJsonModule": true

Conponent 화면을 이루는 부분 웹 페이지의 부분을 쪼는것 것 HTML을 리턴하는 함수 부모 컨퍼런트는 여러명의 자식 컨퍼런트를 가질 수 있다. (Ui 그리고 프젝 시작해보자) 데이터는 최상단 컴포넌트 인 App에서 관리한다. 모듈(module) : JavaScript 파일 각각을 모듈이라고 부른다 다른 모듈을 쓰고 싶으면 import 해야된다. 다른 모듈에서 쓰게 마들고 싶으면 export 해야한다. 외부에서 만들어 import 하기 Menu.tsx export default function Menu() { return ( 짜장면 짬뽕 탕수육 ); } App.tsx // import "./styles.css"; : 상대 경로 import "/src/styles.css"; // 절대 경로 impor..

React frontend library frontend client : 사용자 눈에 보이는 화면 : 브라우저 backend server 눈에 보이지 않지만 앱이 작동하기 위해 꼭 필요한 부분 단어정리 (쉽게 설명해보자~) library : 미리 만들어 놓은 코드 framework : 미리 만들어 놓은 시스템 API : 미리 만들어 놓은 중개자 개발 환경 : CODESANDBOX import "./styles.css"; export default function App() { return ( 백성연 배워보자 리엑트 ); } HTML 시작!! 참고 사이트 W3Schools : HTML, CSS ,jvascript 튜토리얼 사이트 MDN : 모질라 재단에서 운영하는 웹 표준을 정리해 놓은 사이트 index...