개발26 react.useState()는 데이터를 업데이트하는데 이용함!! 데이터가 바뀔 때마다 render() 함수를 호출하는 것은 귀찮음 counter 값을 증가시킬 때마다 리렌더링 초기 컴포넌트가 초기 데이터로 렌더링, 버튼을 클릭하면 리렌더링하려면 useState()를 사용한다. const data = react.useState(); console.log(data) 하면 [undefined, f]가 표시된다. undefined와 function을 주는데 undefined가 초기 값이고, function이 상태 지정 함수이다. 구조분해 할당을 통해 const [counter, setCounter ] = React.useState(0)로 표시한다. 클릭하면 버튼이 업데이트되도록 버튼에 이벤트 리스너를 추가한후 Click me 함수를 만들어주는데, 위에서 상태지정함수인 set.. 2022. 9. 24. react.js는 바뀌는 부분만 업데이트한다는 점이 최고의 장점!! 데이터의 값이 업데이트되어야 하는 상황에서 값을 바꿀 때마다 다시 렌더링하는 방법이 있음 function render(){ reactDom.render(, react)) } 여러가지 요소를 리렌더링하려고 해도 react.js는 UI에서 바뀌는 부분만 업데이트해줌. 기존과 다른 부분만 파악함. 이것이 매우 좋은 점임! html에서는 상위개념까지 업데이트함... 2022. 9. 24. react component를 다른 component에 넣으려면 함수로 만들어줌!! 컴포넌트를 다른 컴포넌트로 넣는 방법 직접 컴포넌트를 만들어서 함수로 만들어준 다음 다른 컴포넌트에 넣어야 함. 이때 대문자를 써야 함 const Button = () => ( console.log("I'm clicked")}> Click me ); const Container = () => ( ) ReactDom.render(, root) 보기 쉽게 코드를 분리한 다음 함께 렌더링 2022. 9. 24. react.js는 JSX를 통해 더 쉽게 createElement를 할 수 있음!! JSX를 이용해 createElement를 더 쉽게 할 수 있음. const title = console.log("mouse entered")}>Hello, I'm a title html과 매우 유사하고 property를 태그처럼 넣어줄 수 있음. 버튼을 만들어보면 const Button = console.log("I'm clicked")}>Click me 브라우저가 JSX를 이해할 수 있게 하기 위해 babel을 통해 변환을 해줘야 함. 2022. 9. 24. 이전 1 ··· 3 4 5 6 7 다음