useRef란 새로운 Reference 객체를 생성하는 기능 이다. const refObject = useRef() 컴포넌트 내부 변수로 일반적인 값들도 저장이 가능하다. useRef useState Reference 객체를 생성 State를 생성 컴포넌트 내부의 변수로 활용 가능 컴포넌트 내부의 변수로 활용 가능 어떤 경우에도 리렌더링을 유발하지 않음 값이 변경되면 컴포넌트 리렌더링 리렌더링을 유발 시키지 않은 그런 변수를 만들고 싶을때 useRef를 사용 useRef는 특정 DOM 요소에 접근할수 가있다. 해당요소를 조작할 수 있다. 특정 요소에 Focus를 준다던지 Styil을 변경할 수 있다. const refobj = useRef(0); console.log("Register 렌더링"); ret..

Refister.jsx import { useState } from "react"; //간단한 회원가입 폼 const Register = () => { const [name, setName] = useState(""); const onChangeName = (e) => { setName(e.target.value); }; return ( 이름:{name} ); }; export default Register; App.jsx import "./App.css"; import Register from "./components/Register"; function App() { return ( ); } export default App; 결과 onChange로 onChangeName 함수를 불러와 이벤트 핸들러로..

Bulb.jsx const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} ); }; export default Bulb; App.jsx import "./App.css"; import { useState } from "react"; import Bulb from "./components/Bulb"; function App() { const [light, setLight] = useState("OFF"); return ( { setLight(light === "ON" ? "OFF" : "ON"); }} > {light === "ON" ? "끄기" : "켜기"} ); } export default App; App.jsx state를..

State란 현재 가지고 있는 형태나 모양을 정의 변화할 수 있는 동적인 값 리액트의 컴포넌트 들은 상태를 정의 할 수 있느 state를 가질 수 있다. state의 값에 따라 렌더링 되는 UI가 결정된다. 리액트가 state의 상태 변화에 따라 렌더링되는 결과를 바꿀수 있다. 리액트에서 다시 렌더링 되는 것을 리 렌더(Re-Render), 리 렌더링(Re-Rendering) 이라고 한다. 리액트에서는 하나의 컴포넌트에 여러개의 state를 가질 수 있다. import "./App.css"; import { useState } from "react"; function App() { const state = useState(); console.log(state); return ; } export defau..

이벤트 핸들링이란? 이벤트가 발생했을 때 그것을 처리하는 것 ex) 버튼 클릭시 경고창 노출 { // 이벤트 핸들러 라고 한다 console.log(text); }} style={{ color: color }} > {text} - {color} {children} onClick을 사용하여 버튼 클릭시 콘솔창에 text 값을 출력한다. const Button = ({ text, color, children }) => { const onClickButton = () => { console.log(text); }; return ( {text} - {color} {children} ); }; 이런식으로 사용 할 수도 있다. 함수 실행 결과는 같다. 클릭 이벤트 말고도 onMouseEnter로 커서를 버튼으로 가..

Props란? 부모 컴포넌트가 자식 컴포넌트에 값을 전달해준는것을 말한다. App.js function App() { return ( ); } Button.js const Button = (props) => { return ( {props.text} ) } export default Button; 결과 이렇게 자식컴포넌트에게 props로 전달해서 전달한 props의 값을 자식컴포넌트가 사용할수 있다. styil props 전달 App.jsx Button.jsx {props.text} ) 결과 styil도 자식컴포넌트에게 전달하여 사용할 수 있다. 부모컴포넌트에서 props에 아무것도 전달하지 않았을때 defaultProps 설정하는 방법 const Button = (props) => { return ( ..