React 안에는 if 문을 쓸 수 없다. 그래서 삼항 연산자(조건부?참일때 실행코드:거짓일때 실행코드) 를 쓴다. 헷갈리지 않게 참일때,거짓일 때 부분에 괄호를 붙일수도 있다. 당연히 실행코드도 여러태그를 쓸 경우 부모태그로 묶어서 하나에 담아야 하고 변수나 함수를 쓰고 싶다면 반드시 {}를 통해 작성해주어야 한다.
온전한 삼항연산자는 if-else 문과 같다.
조건부 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드참일때만 랜더, 거짓일 때는 랜더하지 않는 방식 : 삼항연산자 ? 부분에 &&를 쓴다. 거짓일 때는 출력되지 않기 때문에 : 뒷부분은 쓸 필요가 없다.[if문 과 동일]
조건부 && 참일때 실행할 코드 스타일링[CSS]
카멜 표기법을 쓴다(font-size→fontSize). 스타일에 관한 값들이 여러개라면 객체로 묶고 그 값을 {}로 불러 내거나 직접 안에 넣는 방법 2가지가 있다.
let style={
color:'aqua'
}
<div style={style}>
또는
<div style={{color:'red'}}>둘 다 만약 여러 스타일을 넣고 싶다면 ,로 구분한다.
class 대신 className=”class이름” 으로 넣어야 한다. “class이름”에 중괄호도 가능해서 삼항연산자나 계산값 같은 자바스크립트 결과값을 넣을수도 있다.
닫는 태그 와 주석
br와 같은 html에서는 그냥 쓴 태그도 뒤에 / 를 붙여서 닫아줘야 한다. 주석의 경우 태그 옆에는 /**/형태로 닫는 태그가 있는 주석을 쓰는게 좋다. 태그 안에서는 한줄주석(//)이 가능하다.
React-app
프로젝트 만드는 방법[cd .. : 상위폴더로 주소를 이동]
create-react-app 설치 : npm install -g create-react-app
import A from B – A라는 이름은 B(대부분 주소)를 가진다[a=b처럼 b값을 a에 넣는것과 비슷]