npm 으로 리엑트 시작 하는법
터미널에서 npm init react-app <프로젝트 이름>
위 처럼 입력하면 리엑트에 필요한 환경설정을 간단하게 할 수 있다.
jsx란?
react에서 html 코드를 작성 할 수 있게 해주는 자바스크립트 확장 문법이다
jsx를 사용할때 규칙이 있다
반드시 하나의 요소로 감싸야 한다. 왜냐하면 리엑트의 가상돔이 변경사항을 감지할때 하나의 DOM트리 구조로 구성되어 있다면 변경사항을 효율적으로 감지 할 수 있기 때문이다
ex)
function App() {
return (
<div>
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
</div>
);
}
만약 위 app이라는 함수형 컴포넌트에 div태그가 없다면 에러를 출력하게 된다
삼항연산자
JSX내부에서는 if문은 사용 할 수 없지만 삼항연산자는 사용이 가능하기 때문에 조건에 따라 특정 요소를 보여줄 상황이이라면 삼항연산자를 사용한다
ex)
function App() {
const test = 'true'
return (
<>
{test=== 'true'
?(<h1>조건이 true라면 해당요소가 출력됩니다</h1>)
:(<h2>조건이 false라면 해당요소가 출력됩니다</h2>)
}
</>
);
}위 코드를 해석하자면 조건(test라는 변수가 'true'이면) ?뒤(true일때 출력할값) h1요소를 출력하고 false라면 :뒤 h2요소를 출력해줘 라고 말 할 수 있다.
AND연산자
false일때 어떠한 값도 보여주지 않고 싶은경우 삼항연산자로도 null을 이용해 값을 보여주지 않을 수 있지만 AND연산자를 이용하면 코드가 좀 더 간결해진다
즉 AND 연산자를 이용한 조건부 랜더링은 주로 true일때 요소를 보여주고 false일땐 아무것도 출력하지 않는 경우에 사용된다
부가적으로 and연산자는 두 조건이 모두 true일때 뒤에 조건을 출력하고, 하나라도 false가 있다면 다른 하나가 true여도 출력되지않는다
ex)
function App() {
const test = 'true'
return (
<>
{test=== 'true' && <h1>and 연산자는 두 조건을 모두만족 하면 뒤에 작성된 부분을 출력합니다</h1>}
</>
);
}
위 코드에서 test는 'true' 라는 값이 주어져있기 때문에 트루이고 h1요소는 자체가 트루이기때문에 뒤에요소를 출력 하게된다
ex)
function App() {
const number = 0
return (
<>
{number && <div>내용</div>}
</>
);
}
예외 0은 falsy임에도 화면에 출력된다
inline 스타일링
1 react에서 요소에 인라인 style을 적용할때에는 {}(객체)안에 css내용을 명시하여 적용한다
2 요소에 직접 {} 형태로 작성하면 코드의 가독성이 떨어 질 수 있기 때문에 변수에 작성하고싶은 스타일을 {} 형태로 만들어 요소에 해당 변수를 적용하면 가독성이 좋아진다
3 react에서 css속성은 카멜 표기법으로 작성해야한다 react는 js라이브러리고 결국 js파일이기 때문이다
즉 backround-color를 backroundColor라고 작성해야 옳은 방식이다
ex)
function App() {
const name = 'React'
const style = {
backgroundColor:'black',
color:'aqua',
fontSize:'48px',
fontWeight:'bold',
padding:16
}
return (
<>
<div style={style}>{name}</div>
</>
);
}
react 에서 class 사용법
react에서 class는 자바스크립트에서 class라는 예약어가 있기때문에 className이라고 명시해야한다
class 라고 명시해도 동작에는 문제가 없지만 혼란을 일으킬 여지가 있고, console창에서도 경고 메시지를 보내기 때문에 className 이라고 작명하는 규칙을 따르자
ex)
function App() {
const name = 'React'
return (
<>
<div className='react'>{name}</div>
</>
);
}
react에서 빈태그 작성규칙
1HTML에서 빈태그 즉 input과 br태그 같이 태그가 하나만 사용되는 요소는 닫는 기호(/) 를 사용 할지 안할지는 선택사항이다
하지만 react에서는 빈태그에 닫는 기호(/)를 사용하지 않으면 오류를 출력하기 때문에 반드시 닫는 기호를 명시해 줘야한다
ex)
function App() {
const name = 'React'
return (
<>
<div className='react'>{name}</div>
<input/>
</>
);
}
react에서 주석
리엑트에서 주석을 표현하는 리터럴 === {* *} 이다
위 주석은 한줄 뿐아니라 여러줄 주석을 작성 할 수 있다
해당 기호를 외울필요는 없다 왠만한 코드에디터가 ctrl + / 라는 단축기로 알맞는 주석을 사용 할 수 있기 때문이다
하지만 react에서 // 같은 자바스크립트 주석을 사용하면 주석내용이 그대로 출력되는 점을 숙지하자
ex)
function App() {
const name = 'React'
return (
<>
<div className='react'>{name}</div>
<input/>
{/* 주석을 작성할때 해당 리터럴로 작성해야합니다 물론 여러줄 주석또한 마찬가지!! */}
</>
);
}
ESLint란?
문법을 검사해 주는 도구이다
Prettier란?
코드 스타일을 자동 정리 해주는 도구이다 설정은 본인이 해야함
