[REACT자습서.02] React DOM & Component & Props
2024.02.11 - [HTML+CSS+JAVASCRIPT/React] - [REACT.04] React 자습서(1)
[REACT.04] React 자습서(1)
https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 위와같은 react 자습서를 기반으로 작성하였습니다. 1. 함수 호출 function formatName(us
mink02-study-recording.tistory.com
2024.01.31 - [HTML+CSS+JAVASCRIPT/React] - [REACT.02] REACT의 ELEMENTS
[REACT.02] REACT의 ELEMENTS
1. React의 Elements의 정의 -> Elements are the smallest building blocks of Reack apps. (리액트 앱을 구성하는 가장 작은 블록들) 리액트의 element는 dom element의 가상 형태를 의미한다 -> react elements는 javascript 객체
mink02-study-recording.tistory.com
element와 관련된 이전 글 참조하기!
1. DOM에 element rendering 하기
React Element를 렌더링 하기 위해서는 DOM 엘리먼트를 ReacDOM.createRoot()에 전달
->React element를 root.render()에 전달
html 파일 어딘가에 root 라는 id로 정의되니 <div>가 있다고 가정
<div id = "root"></div>const root = ReactDOM.createRoot(
document.getElementById('root')
)
const element = <h1>hello, word</h1>
root.render(element);
const root = ReactDOM.createRoot(
document.getElementById('root')
)
function tick(){
const element=(
<div>
<h1>hello, world</h1>
<h2>It is {new Data().toLocaleTimeString()}
</div>
)
root.render(elemnet);
}
setInterval(tick, 1000);SetInterval 함수를 이용해, tick이라는 함소를 1초마다 call 하므로서, element를 렌더링 해준다.
2. Components 와 Props
2024.01.31 - [HTML+CSS+JAVASCRIPT/React] - [REACT.03] Component & Props
[REACT.03] Component & Props
1. Component : 작은 컴포넌트들이 모여 큰 컴포넌트를 만들고, 큰 컴포넌트들이 페이지들을 만든다. React component : function으로 생각하면 된다. (Props) 속성들을 입력 받아, 그에 맞는 react element를 만든
mink02-study-recording.tistory.com
Component를 통해 UI가 재사용 가능한 개별적인 여러조각으로 나눌 수 있다. -> JavaScript 함수를 작성하는것!
(1)
function Welcome(props){
return <h1>Hello, {props.name} </h1>(2) Class component
class Welcome extends React.Component {
render(){
return <h1>hello, {this.props.name} </h1?
}
}