Frame-Work/React-JS6 6. React - props(속성값) ㅁ props는 propertis 약자로 속성값 전달 1. App.js - props 보내는곳 import './App.css'; import Hello from './component/Hello'; // Hello component 추가 function App() { return ( ); } export default App; 2. Hello.js - props 받는곳 export default function Hello(props){ console.log(props); return( {props.age} ); } 3. Hello.js - props 받는곳 export default function Hello({ age }){ return( {age} ); } ㅁ props 값 변경하기 ㅇ App.js.. 2021. 5. 18. 5. React - State, useState(상태값) ㅁ State는 component가 가지고 있는 속성값 ㅇ 속성값이 변하면 React는 자동으로 속성값을 업데이트 시켜줌 ㅁ useState 는 실시간 상태값 변경 할때 사용 1. useState import { useState } from 'react'; export default function Hello(){ const [name, setName] = useState('Adidas'); // 상태값 반환하는 setName 변수 function changeName(){ setName(name === 'Adidas' ? 'Asics' : 'Fila'); } return( state {name} Change ); } 2. useState import { useState } from 'react'; exp.. 2021. 5. 18. 4. React - 이벤트 처리(Handing Events) ㅁ 이벤트 처리 함수 만들기 2가지 1. 함수(Event) Hello.js export default function Hello(){ function showName(){ // 1. 이벤트 함수 따로 정의 console.log("ABCD"); } return( Hello Show name Show age ); } 2. 함수(Event) export default function Hello(){ return( Hello Show name { console.log("EFG") } }>Show age ); } ㅁ 결론 상황에 맞게 잘 쓰면됨 ㅁ 직접 이벤트 함수 작성 장점 ㅇ 값을 전달하기 편함 export default function Hello(){ function showAge(age){ console... 2021. 5. 18. 3. React - CSS 만들기 ㅁ css 만들기 3가지 방법 1. css import World from './World'; export default function Hello(){ return( Hello ); } 2. css Hello.js 컨포넌트 Hello.css 생성 Hello.css .box{ width: 100px; height: 100px; background-color: crimson; } Hello.js import World from './World'; import './Hello.css'; // Hello.css import export default function Hello(){ return( Hello App ); } 3. css ㅇ 모듈 css 생성 Hello.module.css // module 만드는.. 2021. 5. 18. 이전 1 2 다음