본문 바로가기
반응형

react js7

[생활코딩] props 강의 key, component, props import React from "react"; import "./App.css"; import "./index.css"; function Header(props) { console.log("props", props, props.title); return ( {props.title} ); } function Aticle(props) { return ( {props.title} {props.body} ); } function App() { return ( ); } export default App; 코드설명 "Header"라는 함수가 있고 “props” 매개변수를 받습니다. 이 함수는 “props” 객체와 그 객체의 “title” 속성을 콘솔에 기록합니다. 첫 번째 “props” 인스턴스는 함수에 전달되는.. 2023. 5. 18.
[생활코딩] props , eslint] src\App.js Line 6:37: 'title' is missing in props validation react/prop-types [생활코딩] prop react prop은 component의 속성이다. React prop은 React 컴포넌트에서 특정한 값을 전달할 수 있도록 하는 속성(property)입니다. Prop은 다른 컴포넌트로부터 전달받을 수도 있고, 컴포넌트 내부에서 생성된 값을 전달할 수도 있습니다. Prop을 사용하여 컴포넌트 간에 데이터를 전달하면, 데이터의 일관성을 유지하며 중복 코드를 줄일 수 있습니다. 컴포넌트의 속성은 일반 JavaScript 변수와 동일하게 다룰 수 있으며, 다른 컴포넌트에서 해당 속성을 사용할 때에는 JSX 문법을 사용하여 속성 값을 전달합니다. React prop은 불변성을 지니며, 컴포넌트가 생성될 때는 초기 값이 설정되며, 이후에는 변경되지 않습니다. 이러한 이유로 React pr.. 2023. 5. 17.
[생활코딩] 시멘틱 웹과 Component 추가하기 [생활코딩] 시멘틱 웹과 Component 추가하기 시멘틱웹: , , 태그를 말한다. https://www.youtube.com/watch?v=WT58gOl8Eh8 따라하면서 오류 정리, import React from "react"; import "./App.css"; import "./index.css"; 이부분은 반드시 import 해야된다 - eslint import React from "react"; 오류부분 function Header() { return; WEB ; } 해결된 부분 function Header() { return ( WEB{" "} ); } funtion 변수() { 괄호하고 return ( 값을 넣어라 ); 2023. 5. 17.
[생활코딩] React 배포하는 방법 React 배포하는 방법 npm run build C:\Users\seolzone\IdeaProjects\lifereact>npm run build > lifereact@0.1.0 build > react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip: 47.11 kB build\static\js\main.a8c82644.js 1.78 kB build\static\js\787.032469ce.chunk.js 427 B build\static\css\main.3068919b.css The project was built assuming it is hosted at /. Yo.. 2023. 5. 16.
[생활코딩] React body 배경css 변경 React body 배경css 변경 변경전 body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } 변경후 body { background-color: po.. 2023. 5. 16.
getter setter 는 왜 하는것인가? getter setter 는 왜 하는것인가? 1. getter/ setter를 사용하는 이유는 데이터 무결성을 위해서 이다. (알고있던 것) , Getter/Setter를 사용하여 데이터의 무결성을 지켜줍니다. 무결성이란 무엇인가요? 데이터의 정확성과 일관성을 유지하고 보증하는 것을 말합니다. 2. getter와 setter를 사용하여 속성을 노출하면서도 속성의 내부 표현을 숨길 수 있다. 3.공용 인터페이스를 변경으로부터 격리하여 구현이 변경되는 동안 공용 인터페이스가 일정하게 유지되도록 한다 2023. 5. 16.
React 오류 01 React 오류 01 코드에 대한 이해 import React,{Component} from "react"; import './App.css'; import {forwardRef} from "react"; import {render} from "react-dom"; /*function App()*/ class App extends Component{ render () { return Hello,React!; } } export default App; import React,{Component} from "react"; import './App.css'; import {forwardRef} from "react"; import {render} from "react-dom"; /*function App()*.. 2023. 5. 16.

티스토리툴바