React Study(1) - 리액트를 다루는 기술 2장

react_study

import "./App.css"; 특정파일을 불러옴(App.css)

JSX

보기 쉽고 익숙함, 더 높은 활용도

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<React.StrictMode>)

React.StrictMode 컴포넌트 = 레거시 기능으로 경고를 주는 디버깅용 컴포넌트

JSX 내부에서 자바스크립트 표현식 작성 가능

let은 if 내부에선 다른 값을 주고 외부에서 또 다른 값 줄 수 있음

const는 한번 지정하면 변경 불가

function App() {
const name='리액트'
return(
<div>
{name === '리액트'?(
<h1>리액트입니다.</h1>
) :(
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
} -->

function App() {
const name='뤼액트'
return <div>{name === '리액트'? <h1>리액트입니다.</h1>:null}</div>
}

AND 연산자(&&)를 사용한 조건부 렌더링

 

function App() {
const name = '뤼액트';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>

}

undefind를 렌더링 할 때는 OR연산자 사용

function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}

name이 undefined일 때 보여주고 싶은 문구가 있을 때

 

function App() {
const name = undefined;
return <div>{name || '리액트'}</div>;
}

인라인 스타일링
background-color -> backgroundColor
function App() {
const name = '리액트';
const style ={
backgroundColor: 'black',
color : 'aqua',
fontSize : '48px',
fontWeight : 'bold',
padding : 16
};
return <div style={style}>{name}</div>
}

class 대신 className

 

function App() {
const name = '리액트';
return <div className="react">{name}</div>;
}

self-closing

태그 사이에 별 내용이 들어가지 않는 경우

function App() {
const name = '리액트';
return (
<>
<div className="react">{name}</div>
<input/>
</>
);
}​

주석 작성 요령

{/*..........*/}

 

function App() {
const name = '리액트';
return (
<>
{/*주석은 이렇게 작성합니다*/}
<div className="react">{name}</div>
<input/>
</>
);
}