React 배워보기 (1. BASICS OF REACT)

LeeJaeHoon·2021년 11월 13일

react로 tag만드는법

const Button = () => (
	<button 
		onClick={ () => console.log("Clicked!")}
		style={{backgroundColor:tomato,}}
	>
		Click Me
	</button>
);
const Container = () => (
	<div>
		<Button />
	</div>
)
ReactDOM.render(<Container />, root); //id가 root인 element에 Container을 넣는다는 뜻

react로 count앱 만들기
- jsx에서는 { }안에 자바스크립트 코드를 쓸 수 있다.
```
const root = document.querySelector("#root");
let counter = 0;
function upCounter() {
	counter += 1;
}
function Container() {
	return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={upCounter}>Click Me</button>
    </div>
  );
}
ReactDOM.render(<Container />, root);
	
```
- 다음과 같이 만들경우 버튼을 클릭해도 화면에서 count는 계속 0으로 표시된다.
- console에 counter을 찍어보면 숫자는 올라가있음
- 처음 화면이 시작될때 ReactDOM.render(, root)로 을 화면에 표시해주고 click을 했을때 다시 화면을 재시작 해줘야 화면에서도 counter가 올라간다.
```
const root = document.querySelector("#root");
let counter = 0;
function upCounter() {
	counter += 1;
  render();
}
function render() {
  ReactDOM.render(<Container />, root);
}
function Container() {
	return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={upCounter}>Click Me</button>
    </div>
  );
}
render();
	
```
- React.useState()를 이용해서 만들기
  - React.useState() → console에 찍어보면 [undefined, f]라고 나온다.
    - undefined → data
      - React.useState(0)을 설정해주면 undefined가 0이 된다.
    - f → data를 바꿀때 사용하는 함수
  - const [counter, setCounter] = React.useState(0)
    - 이 방식으로 배열에서 값을 빼올 수 있다.
    - ex) const num = [1, 2] 라고 했을때 const [first, second] = num에서 first값은 1, second값은 2이다.
```
const root = document.querySelector("#root");
function App() {
	const [counter, setCounter] = React.useState(0);
	return (
		<div>
			<h3>Total clicks: {couter}</h3>
			<button>Click Me</button>
		</div>
	);
}
ReactDOM.render(<App />, root);
```
  - setCounter에 argument를 넣으면 넣은 argument의 값이 couter의 값이 된다.
  - setCounter함수는 리렌더링도 해준다 !
    - ReactDOM.render(, root)을 해준다는 말!
```
const root = document.querySelector("#root");
function App() {
	const [counter, setCounter] = React.useState(0);
	const onClick = () => {
		setCounter(counter + 1);
	}
	return (
		<div>
			<h3>Total clicks: {couter}</h3>
			<button>Click Me</button>
		</div>
	);
}
ReactDOM.render(<App />, root);
```
  - 만약 현재 state를 바탕으로 다음 state를 계산해내고 싶다면 함수를 이용하는 방법이 더 안전하다.
    - 예상 치 못한 업데이트가 어디선가 일어났다고 해도, 함수를 쓰는 방법이 혼동을 주는걸 방지해 준다.
    - setCounter(counter + 1) → setCounter( (preNum) ⇒ preNum + 1);

react로 분을 시간으로 바꿔주는 웹앱만들기

JSX에서 label에 for은 htmlFor로 써줘여한다.
input에 value를 설정 해주면 onChange이벤트를 설정해 주어야 유저가 input의 value를 바꿀 수 있다.

		function App() {
        const [minutes, setMinutes] = React.useState("");
        const onChange = e => {
          setMinutes(e.target.value);
        };
        return (
          <div>
            <h1>Super Converter</h1>
            <div>
              <label htmlFor="minutes">minutes</label>
              <input
                value={minutes}
                onChange={onChange}
                type="number"
                placeholder="minutes"
                id="minutes"
              />
            </div>
            <div>
              <label htmlFor="hours">hours</label>
              <input
                value={minutes / 60}
                type="number"
                placeholder="hours"
                id="hours"
                disabled
              />
            </div>
          </div>
        );
      }
      const root = document.querySelector("#root");
      ReactDOM.render(<App />, root);

flip button을 이용해 flip하기

먼저 React.useState(false)로 flipped을 설정해주고 flip 버튼을 클릭시 flipped의 값을 바꿔준다.

		function App() {
        const [minutes, setMinutes] = React.useState(0);
				const [flipped, setFlipped] = React.useState(false);
        const onChange = e => {
          setMinutes(e.target.value);
        };
				const onFlip = () => {
					setFlipped( current => !current )
				}
        return (
          <div>
            <h1>Super Converter</h1>
            <div>
              <label htmlFor="minutes">minutes</label>
              <input
                value={minutes}
                onChange={onChange}
                type="number"
                placeholder="minutes"
                id="minutes"
              />
            </div>
            <div>
              <label htmlFor="hours">hours</label>
              <input
                value={minutes / 60}
                type="number"
                placeholder="hours"
                id="hours"
                disabled
              />
            </div>
						<button onClick={onFlip}>flip</button>
          </div>
        );
      }
      const root = document.querySelector("#root");
      ReactDOM.render(<App />, root);

flipped가 false일때는 hours의 input disabled가 true가 되고 minutes의 input disabled이 false가 되어야 한다.
- hours의 input의 value는 minutes / 60
- minutes의 input의 value는 minutes

flipped가 true일때는 minutes의 input disabled가 true가 되고 hours의 input disabled이 false가 되어야 한다.

hours의 input의 value는 minutes

minutes의 input의 value는 minutes * 60

		function App() {
        const [amount, setAmount] = React.useState("");
				const [flipped, setFlipped] = React.useState(false);
        const onChange = e => {
          setAmount(e.target.value);
        };
				const onFlip = () => {
					setFlipped( current => !current )
				}
        return (
          <div>
            <h1>Super Converter</h1>
            <div>
              <label htmlFor="minutes">minutes</label>
              <input
                value={flipped ? amount * 60 : amount}
                onChange={onChange}
                type="number"
                placeholder="minutes"
                id="minutes"
								disabled={flipped}
              />
            </div>
            <div>
              <label htmlFor="hours">hours</label>
              <input
                value={flipped ? amount : Math.round(amount / 60)}
                type="number"
                placeholder="hours"
                id="hours"
                disabled={!flipped}
              />
            </div>
						<button onClick={onFlip}>flip</button>
          </div>
        );
      }
      const root = document.querySelector("#root");
      ReactDOM.render(<App />, root);

select tag를 이용해서 Minutes & Hours 변환기와 Km & Miles변환기 나누기

먼저 App 컴포넌트를 MinutesToHours로 바꾸고 App컴포넌트를 select tag가 있는 컴포넌트로 바꾼다

index가 xx이면
Select options
index가 0이면

ndex가 0이면 보여주기

		function App() {
        const [index, setIndex] = React.useState("xx");
        const onSelect = e => {
          setIndex(e.target.value);
        };
        return (
          <div>
            <h1>Super Converter</h1>
            <select value={index} onChange={onSelect}>
              <option value="xx">Select options</option>
              <option value="0">Minutes & Hours</option>
              <option value="1">Km & Miles</option>
            </select>
            <hr />
            {index === "xx" ? <div>Select options</div> : null}
            {index === "0" ? <MinutesToHours /> : null}
            {index === "1" ? <KmToMiles /> : null}
          </div>
        );
      }

LeeJaeHoon

이전 포스트

Youtube Clone Coding (9. Video Player 만들기)

다음 포스트

React 배워보기 (1. BASICS OF REACT)

Youtube Clone Coding (9. Video Player 만들기)

Youtube Clone Coding (10. Video view)

0개의 댓글