본문 바로가기

분류 전체보기36

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.
react.js는 javascript에서 시작해 html에서 끝남! react.js는 어플리케이션이 아주 interactive 하게 만들어주는 라이브러리이고 react engine react dom은 react element를 html에 두는 역할을 함 span을 만들고, reactDom이 html에 위치시킴 const span = React.createElement("span") ReactDom.render(span, root) // root안에 span을 위치시킴 createElement에 argument로 다른 property를 추가할 수 있음 const span = React.createElement("span", {id: "sexy-span"}, "hello, I am a span") 첫번째 argument: html element 두번째 argument: an.. 2022. 9. 24.

티스토리툴바