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

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>
        );
      }

Author And Source

이 문제에 관하여(React 배워보기 (1. BASICS OF REACT)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@abc5259/React-배워보기-1.-BASICS-OF-REACT

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

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

Author And Source

좋은 웹페이지 즐겨찾기