본문 바로가기

전체 글

 (152)
[REACT] 에러 (계속 수정중) 1. React에러import React, { useState } from "react";만약 위코드에서 React에 빨간줄이 있다면, 당장 eslint.config.js파일에 들어가서 extends가 있는지 본다.없다면,  extends: ["eslint:recommended", "plugin:react/recommended"],위 코드를 추가해주면 된다.
[REACT]회원가입 폼 //회원가입 폼//1. 이름 2. 국적 3. 생년월일 4. 자기소개import { useState } from "react";const Register = () => { const [name, setName] = useState("이름"); const [birth, setBirth] = useState(""); const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) => { setName(e.target.value); }; const onChangeBirth = (e) => { setBirth(e.target.value); }; const onCh..
[REACT] 전구 끄고 켜기 및 카운터 모듈화 import { useState } from "react";const Bulb = () => { const [light, setLight] = useState("OFF"); console.log(light); return ( {light === "ON" ? ( ON ) : ( OFF )} { setLight(light === "ON" ? "OFF" : "ON"); }} > {light === "ON" ? "끄기" : "켜기"} );};export default Bulb;import { useState } from "react";const Counter = () ..
[17,18,19]-생성자함수, 일급객체, 프로토타입 복잡하고 세밀해서 중요하게 생각되는 것만 적어놓겠다. 17장. 생성자함수에 의한 객체 생성생성자함수란, new연산자와 함께 호출하여 객체를 생성하는 함수다.인스턴스란, 생성자함수에 의해 생성된 객체다. 생성자함수의 특징1. 객체생성: 생성자함수는 호출 시 새로운 객체 생성한다.2. 속성 초기화: this사용하여 객체의 속성 초기화 가능하다.3. 프로토타입 사용이 가능하다.  this바인딩function Circle(radius){ console.log(this); this.radius=radius; this.getDiameter=functoin(){ return 2*this.radius }}바인딩, 식별자와 값을 연결하는 과정을 의미한다. 위 코드에서는 암묵적으로 빈 객체가 생성된다. 즉, ..
[본캠프] REACT_import, export components폴더를 만들어서 안에 Header.jsx파일을 만든다. 파일안에 function Header() { return ( header );}export default Header;//컴포넌트 Header을 내보내겠다고 알림.App.jsx에서 import "./App.css";//Header을 가져오겠다고 함.import Header from "./components/Header.jsx";function App() { return ( //Header컴포넌트를 가져와서 return해주겟다. 안녕, 리액트! );}export default App;
[본캠프]REACT_터미널!!!! , 파일 기능 &관리 파일생성하기  npm create vite@latest 프로젝트폴더이름 -- --template react밑에 코드로 생성하니 깃허브 올릴 때 폴더 통째로 올라가는 불상사가 생겼다. 그래서 위 코드로 생성하자.폴더를 만들도 폴더에 마우스 우클릭하여 터미널을 키도 위 코드를 복붙해서 넣어주면 된다.나머지는 똑같이 해주면 된다. 참고로 레포지토리는 미리 생성하지 말고 생성하는 과정에서 나온 코드를 vs터미널에 복붙해주면 된다. npm create vite@latest 방향키로 react에 엔터방향키로 javascript 엔터 Done. Now run: 완료. 패키지 설치package.json에 보면 탐색기에 없는 게 있다. 패키지를 설치 안해서 그런거니까 다시 터미널을 켜주고 npm install 또는 np..
[본캠프]<div id="root"></div> 대체 뭐야? 리액트 프로젝트를 생성하여 파일을 살펴보면 html이 있는데 리액트 배우고나서부터는 건들지도 않고 있다.  html안을 보다가 문득 든 생각이, root라는 id이름을 가진 div태그는 어떤 역할을 하는 요소일까?? 1. 렌더링 대상ReactDOM.render()함수가 이 요소를 찾아서 그 안에 컴포넌트를 렌더링한다.예를들면 ReactDOM.render(, document.getElementById('root'))코드가 실행되면, 컴포넌트의 내용이 안에 표시된다. 2. 애플리케이션 구조모든 react컴포넌트는 이 루트 요소 아래에 계층적으로 구조화된다.여러개의 컴포넌트가 아래에서 서로 포함되거나 연결될 수 있다.  즉, ui화면에 표시하는 데 필수적인 요소이다. 삭제하면 절대 안되고 작동되지 않게 된다!..
[본캠프] REACT 3. PROPS(Read-Only) 부모 컴포넌트를 자식한테 줌.function Mother() { const lastName = '최'; return ;}function Child(p) { console.log('props=>', p) const name = '르탄'; return {`내이름은${p.lastName}${name}`} ;}     자식 컴포넌트를 부모한테 줌.function GrandFather() { const name = '르탄이'; return ;}function Mother(p) { const name = p.name; return ;}function Child(p) { const name=p.name; return {name} ;}    childrenimport React f..

티스토리툴바