본문 바로가기

개발/react21

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.
react.js는 property에 event를 등록할 수 있음!! 버튼 생성을 하기 위해 const btn = React.createElement("button", null, "Click me") ReactDom. render(btn, roo) // root 안에서 button을 렌더링 span과 btn을 둘다 렌더링하고 싶다면 const container = React.createElement("div", null, [span, btn]) ReactDom.render(container, root) // root 안에서 container를 렌더링 button click 이벤트를 리스닝하고 싶다면 const btn = React.createElement("button", { onClick: () => console.log("I'm clicked"), }, "Click m.. 2022. 9. 24.

티스토리툴바