<Button /> </div>); // ㄴ !!! 중요 !!! 반드시 태그요소 첫 글자는 대문자여야한다. 소문자면 JSX가 HTML의 버튼태그로 여긴다 ``` - 전체내용 ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>   <script type="text/babel"> const root = document.getElementById("root") const Button = () => ( <button style={{ backgroundColor : "red", }} onClick={() => console.log('mouse enter')}> 클릭해주세요 </button> ); const Title = () => ( <h3 id="title" onMouseEnter={() => console.log('im clicked')}> 저는 h3 입니다. </h3> ); // const container = React.createElement("div", null, [Button,Title]); const Container = ( <div> <Title /> <Button /> </div>); // ㄴ !!! 중요 !!! 반드시 태그요소 첫 글자는 대문자여야한다. 소문자면 JSX가 HTML의 버튼태그로 여긴다 ReactDOM.render(Container, root); //render : 만들었던 React Elemnet를 유저에게 보여준다. React JS가 HTML로 번역함 </script> </html> ``` # render함수 하나 만들어서 리렌더링 진행 // 자바스크립트 변수를 HTML 문장 안에 그대로 {중괄호로 삽입} ## 렌더링을 계속 명시해줘야 하기 때문에 좋은 방법은 아님 - 리액트 : state : 데이터 저장소 - 핵심요소 ```js 1. function countUp() { counter = counter + 1; render(); // ㄴ Container 리렌더링 } 2. <button onClick={countUp}>Click me</button> ``` - 전체내용 ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>   <script type="text/babel"> const root = document.getElementById("root") let counter = 0; function countUp() { counter = counter + 1; render(); // ㄴ Container 리렌더링 } function render() { ReactDOM.render(<Container />, root); } // const container = React.createElement("div", null, [Button,Title]); const Container = () => ( <div> <h3> Total click: {counter} </h3> <button onClick={countUp}>Click me</button> </div> ); // <button onClick={countUp}>Click me</button> // ㄴ 버튼에 이벤트 리스너 연결 render(); </script> </html> ``` # 리렌더링을 리액트가 제공해주는 기능으로 실현한다 - 핵심코드 ```js // 아래 App컴포넌트가 리렌더링됨. 어떻게 되는지 보자. function App() { const [counter, setCounter] = React.useState(0); // ㄴ 다음을 제공 : [사용할 데이터, 데이터를 바꿀 때 사용하는 함수] // counter라고 설정한 현재 state // 다음 state를 위해서 setCounter 계산 // ㄴ 데이터를 바꿀 때 사용하는 함수 >> 자동 리렌더링을 제공 // 이제 리렌더링을 각 함수마다 ReactDOM.render 해줄 필요가 없어요. // 참고 : 데이터 뽑는 방법 // 아래와 같이 행렬 데이터를 뽑을 수 있다. 그러나 너무 열악한 코딩 // const A = data[0]; // const B = data[1]; // 이를 아래와 같이 수정할 수 있다. // const [A , B] = arraySample; // ㄴ 각 arraySample 요소의 이름을 지정해주었다. const onClick = () => { // setCounter(counter + 1) // counter = counter + 1; // setCouter 매개체로 수식 말고 그냥 값을 넣어줘도 됨. // 그러나 아래와 같이 사용하는 것이 더 좋음 setCounter((current) => current + 1); }; ``` - 전체코드 ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>   <script type="text/babel"> const root = document.getElementById("root") function App() { const [counter, setCounter] = React.useState(0); // ㄴ 다음을 제공 : [사용할 데이터, 데이터를 바꿀 때 사용하는 함수] // ㄴ 데이터를 바꿀 때 사용하는 함수 >> 자동 리렌더링을 제공 // 이제 리렌더링을 각 함수마다 ReactDOM.render 해줄 필요가 없어요. // 참고 : 데이터 뽑는 방법 // 아래와 같이 행렬 데이터를 뽑을 수 있다. 그러나 너무 열악한 코딩 // const A = data[0]; // const B = data[1]; // 이를 아래와 같이 수정할 수 있다. // const [A , B] = arraySample; // ㄴ 각 arraySample 요소의 이름을 지정해주었다. const onClick = () => { // setCounter(counter + 1) // counter = counter + 1; // setCouter 매개체로 수식 말고 그냥 값을 넣어줘도 됨. // 그러나 아래와 같이 사용하는 것이 더 좋음 setCounter((current) => current + 1); }; console.log(counter); return ( <div> <h3> Total click: {counter} </h3> <button onClick={onClick}>Click me</button> </div> ); } ReactDOM.render(<App />, root); </script> </html> ``` # useState의 활용 // input에 적용하여 활용 - 핵심코드 ```js function App() { const [minutes, setMinutes] = React.useState() // 값 minutes 값변동함수 setMinutes const onChange = (event) => { console.log("무엇인가 적히고 있다..."); console.log(event.target.value); setMinutes(event.target.value); } ... return ( ... <input value={minutes} onChange={onChange} ``` - 전체코드 ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>   <script type="text/babel"> const root = document.getElementById("root") function App() { const [minutes, setMinutes] = React.useState("") // 값 minutes 값변동함수 setMinutes const onChange = (event) => { console.log("무엇인가 적히고 있다..."); console.log(event.target.value); setMinutes(event.target.value); } // onChange 함수는 바뀐 이벤트를 가져와서 사용함. input을 스스로 업데이트 시킨다. // event는 target을 가지고 있는데 여기서 target은 바뀐 input // 즉, event > target > value가 인풋의 value={minutes}를 바라봄 // input의 value는 원래 uncontrolled 속성임. // value={minutes}를 통해 외부에서 input의 value 수정이 가능하다. const reset = () => setMinutes(0); return ( <div> <h1> 슈퍼컨버터 </h1> <label htmlFor="minutes"> 분 </label> <input value={minutes} onChange={onChange} id="minutes" placeholder="분입력" type="number" /> <br /> <h3>이 분을 바꾸고 싶으신가요? : {minutes}</h3> <label htmlFor="hours"> 시 </label> <input value={Math.round(minutes / 60)} id="hours" placeholder="시변환" type="number" /> <button onClick={reset}>리셋버튼</button> </div> ); } ReactDOM.render(<App />, root); // 라벨태그 : 누르면 인풋이 선택됨. for 로 연결함. // <label for="minutes"> 분 </label> 이것은 잘못된 표현이다 // for는 자바스크립트 용어이다. // class도 사용해선 안된다. // 왜냐면 JSX를 쓰고있기 때문이다. // htmlfor라고 명시를 해줘야함. // onChange={onChange} : 태그에 변화가 생기면 실행된다. // </script> </html> ``` # select의 옵션 value를 통해 만들어놓은 함수를 선택 할 수 있다. - 함수의 select선택도 스테이트로 진행한다. - 선택된 함수는 value 에 따라서 <MinutesToHours/> 로 불러온다. ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>    <script type="text/babel"> const root = document.getElementById("root") function MinutesToHours() { const [amount, setAmount] = React.useState("") const [flipped, setFlipped] = React.useState(false); // 값 flipped 값변동함수 setFlipped const onChange = (event) => { console.log("무엇인가 적히고 있다..."); console.log(event.target.value); setAmount(event.target.value); } // onChange 함수는 바뀐 이벤트를 가져와서 사용함. input을 스스로 업데이트 시킨다. // event는 target을 가지고 있는데 여기서 target은 바뀐 input // 즉, event > target > value가 인풋의 value={amount}를 바라봄 // input의 value는 원래 uncontrolled 속성임. // value={amount}를 통해 외부에서 input의 value 수정이 가능하다. // state를 바탕으로 UI를 변경해 줄 수 있다는 것을 기억하자!! // state의 값변동함수를 사용할 때마다 모든 UI가 새로고침된다. const reset = () => setAmount(0); // const onFlip = () => setFlipped(!flipped); 이렇게 말고 아래처럼 쓰자 const onFlip = () => { reset(); setFlipped((current) => !current);//현재 state 값을 매개변수로 받아 반대로 돌려준다는 의미 } return ( <div> <label htmlFor="minutes"> 분 </label> <input value={flipped ? amount * 60 : amount} onChange={onChange} id="minutes" placeholder="분입력" type="number" disabled={flipped === true} /> <br /> <h3>이 분을 바꾸고 싶으신가요? : {amount}</h3> <label htmlFor="hours"> 시 </label> <input value={flipped ? amount : Math.round(amount / 60)} id="hours" placeholder="시변환" type="number" disabled={flipped === false} onChange={onChange} /> <button onClick={reset}>리셋버튼</button> <button onClick={onFlip}>{flipped ? "분으로 플립" : "시간으로 플립"}</button> </div> ); } function KmToMiles(){ return( <h3>KM 2 M</h3> ) } // ㄴ 이것을 아래 APP에 컴포넌트로 넣어줄 수 있다. function App() { const [index, setIndex] = React.useState("x"); const onSelect = (event) => { setIndex(event.target.value); }; return ( <div> <h1> 슈퍼컨버터 </h1> <select value={index} onChange={onSelect}> <option value="x">Select</option> <option value="0">Minutes & Hours</option> <option value="1">Km & Miles</option> </select><br/> {//자바스크립트를 중괄호 안에 쓸 수 있다. index === "x" ? "선택해주세요" : null } {//분-시 변환 index === "0" ? <MinutesToHours/> : null } {//K-M 변환 index === "1" ? <KmToMiles/> : null } </div> ); } ReactDOM.render(<App />, root); // 라벨태그 : 누르면 인풋이 선택됨. for 로 연결함. // <label for="minutes"> 분 </label> 이것은 잘못된 표현이다 // for는 자바스크립트 용어이다. // class도 사용해선 안된다. // 왜냐면 JSX를 쓰고있기 때문이다. // htmlfor라고 명시를 해줘야함. // onChange={onChange} : 태그에 변화가 생기면 실행된다. </script> </html> ``` # 버튼의 스타일을 재사용하면서 버튼의 이름만 바꿔보자 - 버튼함수 지정 - 버튼함수의 이름을 {고유명사}로 지정 - 지정된 함수를 태그화 하여 App에서 렌더링 - 렌더링 시킬 때 고유명사에 원하는 단어를 넣어서 바꿔줄 수 있음 (계속 재사용이 가능하다) - 버튼함수는 {고유명사} 를 가져다 매개체로 사용이 가능함 ```js <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body>    <script type="text/babel"> const root = document.getElementById("root") function KmToMiles(){ return( <h3>KM 2 M</h3> ) } function Btn({mystyle}){ //props 대신 {mystyle}을 쓰자 console.log(props); return( <button style={{ backgroundColor:"red", padding : "10px" }}>{mystyle}</button> //props.mystyle 대신 {mystyle}만 써도 됨 ); } // ㄴ 이것을 아래 APP에 컴포넌트로 넣어줄 수 있다. function App() { return ( <div> <Btn mystyle="nice" x={false}/> <Btn mystyle="cool" y={3}/> </div> ); } ReactDOM.render(<App />, root); // 라벨태그 : 누르면 인풋이 선택됨. for 로 연결함. // <label for="minutes"> 분 </label> 이것은 잘못된 표현이다 // for는 자바스크립트 용어이다. // class도 사용해선 안된다. // 왜냐면 JSX를 쓰고있기 때문이다. // htmlfor라고 명시를 해줘야함. // onChange={onChange} : 태그에 변화가 생기면 실행된다. </script> </html> ``` </article></body></html>

$$config title: ?노마드코더 리액트 강의 keywords: - ReactJS로 영화 웹 서비스 만들기 - 자바스크립트 버튼 카운트 - 리액트 임포트 $$ # 자바스크립트 버튼 카운트 ```js Total click: 0 ``` # 리액트 임포트 ```js Total click: 0 ``` # 리액트 기본 사용법 / 리액트 임포트 이후 요소 생성 / ReactDom.render (어렵게 사용하는 리액트) ```js

``` # 리액트 사용법 응용 1 / 리액트의 정수 / React.createElement로 HTML 태그의 생성, 기능구현, 내용까지 한번에 만들기 ```js

``` # JSX사용 / React.createElement를 한번만 사용하자! - 핵심요소 ```js const container = React.createElement("div", null, [Button,Title]); ``` - 전체내용 ```js

``` # JSX사용 2 / const container = React.createElement 조차 써주지 않는다 / 대신에 태그로 치환하여 사용 ## 기존 엘리먼트가 담겨있던 변수를 함수로 바꾸고, 그 함수명을 태그화 하여 렌더링한다. - 핵심요소 ```js const Container = (