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

51268 단어 ReactReact
  1. 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을 넣는다는 뜻
  2. 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);
  3. 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>
                  );
                }

좋은 웹페이지 즐겨찾기