반응형 React3 React #3 Components 와 Props React #3 함수 컴포넌트 function funcComponent(props) { return Hello, {props.name}; } 클래스 컴포넌트 class classComponents extends React.Component { render() { return Hello, {this.props.name}; } } React 관점에선 위 코드의 함수 컴포넌트와 클래스 컴포넌트는 동일한 컴포넌트이다. 컴포넌트 렌더링 function funcComponent(props) { return 안녕, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(e.. 2023. 11. 9. React #2 - 엘리먼트 랜더링 React #2 엘리먼트 렌더링 const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, Son; root.render(element); React 엘리먼트를 렌더링 하기 위해 DOM 엘리먼트를 ReactDOM.createRoot()에 전달 후 root.render()에 전달해야 한다. 랜더링 된 엘리먼트 업데이트 const root = ReactDOM.createRoot( document.getElementById('root') ); function setTime() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}.. 2023. 11. 8. React #1 - JSX React #1 JSX란? JavaScript를 확장한 문법이고, React와 함께 사용할 것을 권장한다고 한다. Vue를 공부하던 사람은 React의 방식인 JavaScript 코드 안에서 UI 코드를 작업하는 게 익숙하지 않을 것이다. 물론 나도 Vue를 먼저 공부했기에 익숙하지가 않다.. ㅎ 그런데 이러한(JavaScript 코드 안에 UI 관련 작업) 방식이 시각적 그리고 에러 및 경고 메시지도 좀 더 직관적으로 표시한다고 한다. JSX에 표현식 포함하기 const playerName = 'Son'; const element = EPL Best Player, {value}; 함수 호출 function formatPlayerName(user) { return player.firstName + ' '.. 2023. 11. 7. 이전 1 다음 LIST
