전체 글26 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. 2. React - Component 만들기 ㅁ component 생성위치 ㅇ scr > component > Hello.js ㅇ Hello.js // 첫글자 대문자 국룰 ㅁ component 3가지 방법 1. component const Hello = function (){ Hello }; export default Hello; 2. component const Hello = () => { // function 생략 가능 Hello }; export default Hello; 3. component export default function Hello(){ return Hello } ㅁ component 만들때 3가지 방법중 아무거나 사용하면됨(현재 프로젝트 문법에 맞게 사용하면됨) ㅁ 만든 component 사용하기 App.js ㅇ 기본 imp.. 2021. 5. 18. 이전 1 2 3 4 5 ··· 7 다음