React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.
📝 감싸는 요소
컴포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야 한다.
import React from 'react'; function App(){ return( <div> <h1>Hello</h1> <h2>Is it working well?</h2> </div> ) } export default App;
📝 자바스크립트 표현
import React from 'react'; // 자바스크립트 표현 function App(){ // 자바스크립트 영역 const name = 'react'; return( //HTML 영역 <div> <h1>Hello! {name}</h1> <h2>Is it working well?</h2> </div> ) } export default App;
📝 div 등에 class라는 속성을 설정할 때
기존 방식
<div class="classEx1"> </div>
JSX 방식
<div className="classEx1"> </div>
📝 React 엘리먼트는 대문자로 시작
function Hello(){ return <div>Hello!</div> } function HelloWorld(){ return <Hello /> }
📝 삼항 연산자(조건부 연산자)를 사용한 조건부 렌더링
class App extends Component { render() { let name = 'React'; return ( <div> { name === 'React' ? ( <h1>This is React.</h1> ) : ( <h1>This is not React.</h1> ) } </div> ); } }
📝 AND 연산자(&&)를 사용한 조건부 렌더링
class App extends Component { render() { let name = 'React'; return ( <div> { name === 'React' && <h1>This is React.</h1> } </div> ); } }
📝 OR 연산자(||)를 사용한 조건부 렌더링
class App extends Component { render() { let name = undefined; return ( <div> { name === 'React' || <h1>This is React.</h1> } </div> ); } }