[리엑트] 정리 4

1. State

- 변수를 여러개 사용할경우 여러개의 state를 가지고 사용한다. 

- array 문법을 이용해 두개의 변수를 한번에 지정한다. 

const [amount, setAmount] = React.useState(0);                                       
const [flipped, setFlipped] = React.useState(false);
const [index, setIndex] = React.useState("xx");

 

2. JSX 조건문

- JSX에서 Javascript처럼 조건문을 사용할 수 있다. 

- { 조건문 ? true이면 반환 : false이면 반환 } 의 형태 

<button onClick={onFlip}>{flipped ? "Go to Minutes" : "Go to Hours" }</button>

<div>
	{index === "xx" ? "Please select your units" : null}
    {index === "0" ? <MinutesToHours /> : null}
    {index === "1" ? <KmToMiles /> : null}
</div>

 

3. 컴포넌트들을 전부 함수화하여 사용하자. 

- 이때 컴포넌트들의 이름은 대문자로 시작해야 한다.  

- App() 에서 최종 구성을 하자.(java main함수와 비슷한 아이디어)

function MinutesTohours(){...}
function KmToHours(){...}
function App(){...}

 

*4. javascript math, 올림, 버림, 반올림, 소수점아래표기

javascript 소수점 버림, 올림, 반올림 (tistory.com)

javascript 소수점 버림, 올림, 반올림

 

5. JSX inline 방식의 css 변경 방법 

- style 속성에 object로 css를 전달할 수 있다.

- color:"#fff", 형태, 큰따옴표와 쉼표 주의 

- *CSS라면? color:#fff; 

React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법 (tistory.com)

React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법