-
리엑트 강의 내용 정리1카테고리 없음 2022. 6. 26. 22:29
https://nomadcoders.co/react-for-beginners/
자바스크립트와 리엑트 사용법 비교
자바스크립트 사용
클릭시 숫자 1씩 증가
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <span>Total clicks: 0</span> <button id="btn">Click me</button> </body> <script> let counter = 0; const button = document.getElementById("btn"); const span = document.querySelector("span"); function handleClick() { counter = counter + 1; span.innerText = `Total clicks: ${counter}`; } //click시 handleClcik함수 실행 button.addEventListener("click", handleClick); </script> </html>리엑트-이해를 위한 방식
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> </body> <!-- react, react-dom import code --> <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" ></script> <script> const root = document.getElementById("root"); //html element, property , 내용content const span = React.createElement( "h3", // { id: "smart-span", style: { color: "green" } }, { id: "title", onMouseEnter: () => console.log("mouse enter"), style: { color: "yellow", }, }, "Hello, I'm a span" ); const btn = React.createElement( "button", { //event listner onClick: () => console.log("im clicked"), }, "Click me" ); //span과 btn모두 배치하기 위해 container 생성 const container = React.createElement("div", null, [span, btn]); //render의 의미는 React element를 가지고 HTML로 만들어 배치한다는 뜻 //root안에 배치한다 ReactDOM.render(container, root); </script> </html>리엑트-더 편리하고 쉬운 방식
JSX 사용 JSX-JavaScript를 확장한 문법
<!DOCTYPE html> <html lang="ko"> <body> <div id="root"></div> </body> <!-- react, react-dom import code --> <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" ></script> //JSX변환 위한 babel import <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const root = document.getElementById("root"); //함수로 만들어준다 function Title() { return ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a title </h3> ); } const Button = () => ( <button style={{ backgoundColor: "tomato", }} onClick={() => console.log("i'm clicked")} > Click me </button> ); //component import component이름은 항상 대문자로 정한다(html태그와 혼동을 피하기 위해) const Container = () => ( <div> <Title /> <Button /> <Button /> <Button /> </div> ReactDOM.render(<Container />, root); </script> </html>함수
let counter = 0; //counter을 1씩 올려주는 함수 생성 function countUp() { counter = counter + 1; } const Container = () => ( //변수를 연결해준다 counter //button에 countUp 함수 연결 버튼을 클릭할 때마다 counter가 1씩 증가한다 <div> <h3>Total clicks: {counter}</h3> <button onClick={countUp}>Click me</button> </div> );State이용해 상태값 변경
<script type="text/babel"> const root = document.getElementById("root"); function App() { //useState사용해 데이터를 리랜더링하기 //값을 담기위한 data값, 변경할data상태값 //초기값0 const [counter, setCounter] = React.useState(0); const onClick = () => { //설정한 값으로 업데이트 setCounter(counter + 1); }; return ( <div> <h3>Total clicks: {counter}</h3> <button onClick={onClick}>Click me</button> </div> ); } //페이지로드시 바로 실행되는 코드 ReactDOM.render(<App />, root); </script> </html>상태변경 방법
//useState의 상태값 사용해 컴포넌트의 state를 바꿀 때마다 새로운 값을 가지고 리렌더링 된다 const [counter, setCounter] = React.useState(0); const onClick = () => { //설정한 값으로 업데이트 현재의 state를 이용해 새로운 state값 생성 //counter는 다른 곳에서 업데이트 될 수 있기 때문에 좋은 방법은 아니다 //setCounter(counter + 1); //위의 방법과 같은 결과인데 더 안전한 방법 현재값 넣어준다 current //현재state 기반으로 계산하고 싶다면 함수 이용 setCoundter((current) => current + 1); //상태값 변경 다른방법 //setCounter('원하는값') //console.log(rendered); };inputs and state
function App() { const [minutes, setMinutes] = React.useState(""); //label텍스트 클릭시 input클릭된다 input옆에 써준다 //label을 input에 연결시키기 위해 for속성 이용 for이 자바스크립트 용어이기 때문에 리엑트에서는 htmlFor을 써준다 const onChange = (event) => { //input에 입력되는 값 setMinutes(event.target.value); }; //reset함수 버튼에 적용하면 눌렀을 때 reset된다 const reset = () => setMinutes(0); return ( <div> <h1>Super Converter</h1> <div> <label htmlFor="minutes">Minutese</label> <input //분을 60으로 나눠서 반올림 값으로 시간 출력 //value를 minutes state로 입력해준다 외부에서도 수정하기 위해 value={minutes} id="minutes" placeholder="Minutes" type="number" //사용자가 다른 값을 입력할 때마다 value를 업데이트하게 한다 onChange={onChange} /> </div> <div> <label htmlFor="hours">Hours</label> <input //minutes를 이용해 계산 Math.round(반올림) value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" /> </div> <button onClick={reset}>Reset</button> </div> ); }flip state
function App() { const [amount, setAmount] = React.useState(""); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; //reset에 사용할 함수 const reset = () => setAmount(0); //flip이 false라면 true반환 true면 false반환 //현재state를 바탕으로 새로운 state계산 //const onFlip = () => setFlipped(!flipped); //위 방법보다 안전한 방법 현재의 state값 사용해 그 반대를 도출하도록 입력 const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( <div> <h1>Super Converter</h1> <div> <label htmlFor="minutes">Minutese</label> <input //flipped상태라면 분으로 단위변환 아니라면 amount값 그대로 보여준다 value={flipped ? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} //flip상태에 따라 disabled상태가 바뀐다 disabled={flipped} /> </div> <div> <label htmlFor="hours">Hours</label> <input //분을 60으로 나눠서 시간이 나오게 만든다 반올림 값으로 //flipped상태라면 state에 있는 값 그대로 아니라면 변환된 상태값을 보여주도록 설정 value={flipped ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" onChange={onChange} //disabled값 입력 못하게 막는다 //flipped의 기본값은 false, flipped가 false이면 hours는 disabled된다 //flipped가 false라면, disable는 true가 되어야 한다 disabled={!flipped} /> </div> <button onClick={reset}>Reset</button> <button onClick={onFlip}>Flip</button> </div> ); }Props
부모컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
<script type="text/babel"> //props(보통prps라고 지정)는 Btn으로부터 전달받는 properties //props는 첫번째이자 btn이 전달받는 유일한인자 //props는 부모 컴포넌트에서 보내는 모든것을 갖는 오브젝트이다 //props로 인자를 받고 있기 때문에 text라는 속성을 가져와서 사용할 수 있다 //function Btn(props) { // return ( // <button // style={{ // backgroundColor: "tomato", // color: "white", // padding: "10px 20px", // border: 0, // borderRadius: 10, // }} // > // {props.text} // </button> // ); //} //props는 오브젝트이기때문에 오브젝트에서 속성을 꺼내와서 사용하는 방법 //이 방법을 더 많이 쓴다 function Btn({ text, big }) { return ( <button style={{ backgroundColor: "tomato", color: "white", padding: "10px 20px", border: 0, borderRadius: 10, fontSize: big ? 18 : 16, }} > {text} </button> ); } function App() { return ( <div> {/*Btn이라는 함수를 불러서 text라는 인자를 보내는 것과 같다 속성의 이름 마음대로 정한다 text*/} {/*Btn ({text:"save changes"})처럼 btn함수의 첫번째 인자(argument)로 들어간다*/} <Btn text="Save Changes" big={true}/> <Btn text="Countinue" big={false} /> </div> ); }Prop Types
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
props types설치
props의 타입설명 설정된 타입과 다를 경우 오류를 출력한다
propType.string 문자만 설정할 수 있다
propType.number 숫자
isRequired 를 붙여주면 필수조건이 된다<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js "></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> //fontSize를 설정해줄 경우 값이 설정되지 않은 두번째 버튼에서만 적용된다 function Btn({ text, fontSize = 16 }) { return ( <button onClick={onClick} style={{ backgroundColor: "tomato", color: "white", padding: "10px 20px", border: 0, borderRadius: 10, fontSize: fontSize, }} > {text} </button> ); } //props의 타입설명 설정된 타입과 다를 경우 오류를 출력한다 필수로 설정할 경우 isRequired추가 Btn.protoTypes = { text: PropTypes.string.isRequired, fontSize: PropsTypes.number, }; function App() { return ( <div> {/*Btn이라는 함수를 불러서 text라는 인자를 보내는 것과 같다 속성의 이름 마음대로 정한다 text*/} {/*Btn ({text:"save changes"})처럼 btn함수의 첫번째 인자(argument)로 들어간다*/} <Btn text={"Save Changes"} fontSize={18} /> <Btn text={"Continue"} /> </div> ); }props를 전달할 때의 이름과 사용할 때의 이름은 같아야 한다
function Btn(props) { return ( <button onClick={onClick} style={{ backgroundColor: "tomato", color: "white", padding: "10px 20px", border: 0, borderRadius: 10, fontSize: props.fontSize, }} > {props.text} </button> ); } function App() { return ( <div> <Btn text="Save Changes" fontSize={18} /> <Btn text={"Continue"} /> </div> ); }