정원

Class App extends Component { render() { return ( hi ); } } app이란 클래스를 만들고 리액트 컴포넌트클래스를 상속해서 새로운 클래스를 만드는 것 렌더라는 메소드를 가지고있다 props와 state Class App extends Component { constructor(props){ super(props); this.state= { subject:{title:'web', sub:'www'} } }//컴포넌트가 실행될때 렌더보다 먼저 실행되면서 초기화을 담당 render() { return (

생명주기 메서드 클래스형 컴포넌트에서만 사용가능 마운트 마운트될 때 발생하는 생명주기 constructor getDerivedStateFromProps render componentDidMount constructor constructor()는 컴포넌트의 생성자 메서드 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 생성자로 props를 전달받아 state를 초기화 해야 할 때 사용하는 메서드 state를 초기화하지않는다면 구현하지않아도 됨 반드시 첫줄에 super(props);를 호출해야하며 그렇지 않은 경우 오류 발생 constructor() 내부에서는 setState()메서드를 지원하지않음 constructor(props) { super(props); console.log("constructor")..

컴포넌트 react 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있다 ! 리액트 컴포넌트는 react.component react.purecomponent로 나누어 정의 함 ! React.component ES6 class를 사용해 리액트 컴포넌트를 정의할 때에 기초가 되는 class React.PureComponent react.component와 비슷 react.component는 shouldComponentupdate()를 구현하지않지만 react.purecomponent는 props와 state를 이용한 얕게 비교를 구현한다는 차이점만이 존재 shouldComponentupdate() 현재 state또는 props의 변화가 컴포넌트의 출력결..

클래스형 class Hello extends Reacr.Component { render() { return hello {this.props.name}; } } //rcc 단축키 React.Component 클래스를 상속 데이터는 this.state에 render() 함수에 HTML과 같은 JSX문법을 이용해서 데이터 UI로 표기 함수형 function Hello () { return hello, {props.name}; } //rsi 단축키

리액트는 자바스크립트 라이브러리 컴포넌트로 이루어진 ui라이브러리 루트 jsx className onClick html 마크업언어 jsx 자바스크립트 코드 형제노드 사용할 수 없음 한가지 태그로 감싸줘야 함 react.Fragment =

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals();

useState - 컴포넌트의 상태 - 기본적으로 데이터가 저장되는 곳 - 변수 대신 쓰는 데이터 저장공간 - 문자, 숫자, array, object 다 저장가능 - 웹이 App처럼 동작하게 만들고 싶음 - state는 변경되면 HTML이 자동으로 재렌더링됨 - 자주 바뀌는 중요한 데이터 state로 사용 import {useState} from "react"; //리액트 내장함수 사용 const [state, setState] = useState("초기값"); //state: (=초기값) 데이터, setState: 데이터를 변경하는 함수 useEffect Mount: 화면에 첫 렌더링 Update: 다시 렌더링 Unmount: 화면에서 사라질때 useEffect( ( ) => { } ) 인자로 콜백함수..

JSX: Babel: jsx로 적은 코드를 브라우저가 이해할 수 있게 변환해줌 cosnt Button = { console.log("i'm clicked")}> Click me style 객체로 들어가기때문에 {{}} , ","쉼표로 마무리 , 카멜케이스 사용 const container = React.createElement("div", null, [Title, Button] ReactDOM.render(container, root); const Container = //컴포넌트의 첫 글자는 대문자여야함.

이벤트 리스닝 및 이벤트 핸들러 수행 const onChange = () => { console.log("ya"); }; //카멜케이스로 작성 //() x, 앞쪽에 함수 생성하는것이 좋음 useState 컴포넌트 하뭇가 다시 호훌되는곳에서 변경된 값 반영하기 위해 state로 값을 정의할 수있게 해줌 리액트 컴포넌트 함수안에서 useState 호출 cosnt [현재 상태값, 업데이트하는 함수 ] = useState (); useState Hook 왜 상수형 사용 ? 등호를 사용해서 값 할당 안함 state 업데이트 하는 방법이 아니기때문 input const hello [hello, sethello] = useState(""); const hi = (event) => { sethello(event.tar..

return ( Blog 냥 {post[0]} {setPlus(plus + 1);}}> ♥ {plus} 7월 28일 발행 {post[1]} 7월 28일 발행 {post[2]} 7월 28일 발행 ); } jsx (확장문법) - class넣을땐 className사용 - 변수 넣을 때{ } 중괄호 사용 = 데이터바인딩 {서버에서 데이터를 가져와서 사이사이에 넣음} - style 넣을땐 style={ { 스타일명:'값' } } 괄호안엔 오브젝트,스타일명작성시 바사용 안됨 카멜케이스로 기입 state const [post, setPost] = useState([ "귀여운 고양이가 궁금해?", "귀여운 강아지", "귀여운 햄스터" ]); const [plus, setPlus] = useState(0); state ..