-
nomard) ReactJS 기본, useState, Component, propsReact 2023. 3. 13. 11:23
setCounter((current) -> current +1) => current와 함수를 이용해서 현재 값을 보장받는다
https://nomadcoders.co/react-for-beginners
1 _ 리액트란?
: react js는 웹 사이트에 interactivity ( 상호작용 )을 만들어준다.
일반적인 바닐라 js를 이용할 경우 간단한 기능일지라도 작성하기 번거로운 경우가 많이 발생한다.
react는 자주 사용되는 기능을 쉽게 가져올 수 있게 만든 기능이다.
리액트를 사용하기 위해 import 해보자
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
- react와 react dom
reactdom 의 역할
: react로 생성한 elements 들을 html에 둔다.
react의 특징
: 기본적으로 html -> javascript로 제작하던 진행 하지만, react에서는 javascript에서 html을 작성하는 형태로 작업을 많이한다. ( 작업 순서가 반대다 )
2 _ 리액트 기본 문법
<script> const 변수 = React.createElement("태그" , {property} , "텍스트(value)") -> html 태그를 생성한다 const 변수 = React.createElement("태그" , {property} , [변수1, 변수2] ) -> 태그 내부에 변수 2개를 배열 형태로 집어넣을 수 있다 (다른 태그 2개를 넣을 수도 있다) ReactDOM.render( 변수, 렌더링할 위치 ) -> 태그 등이 저장된 변수를 렌더링할 위치를 지정해서 html에 나타낼 수 있다 createElement 의 property 요소에 event 요소를 추가할 수도 있다 ex) .createElement("태그", { id : "yourid", onClick:() => 실행문 } , "value") -> 다음과 같이 addEventListener와 해당 함수를 제작해서 쓰는 방법 대신에 한 줄에 두 가지를 모두 나타낼 수 있다. </script>
: 사실상 React.createElement는 잘 사용하지 않는다.
3 _ 더욱 편리한 JSX
JSX 를 import ( download ) 하고 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> JSX 문법을 적용하고 싶은 스크립트에 type을 지정해줘야한다. <script type="text/babel"> 스크립트 내용 </script>
- JSX는 리액트 기본 문법과 하는 역할이 같지만, 문법을 html로 쓸 수 있다는 장점 때문에 많은 개발자들이 JSX를 사용한다.
다음과 같은 방법으로 변수에 태그를 저장하고, html에 랜더링 할 수 있다. const apple = ( <h1 id="title" style={{backgroundColor:"red" , height:200}} onClick={() => 실행문} > H1 TEXT </h1> ); ReactDOM.render(apple, 저장하고 싶은 id);
- html처럼 작성하되, 속성을 변경할 때 style = {{ }} 를 쓴다는 것과 event로 함수를 실행 시킬 때
onEvent={() => 실행문} 형태로 사용한다는 것에 주의하자.
또한 const apple = ( ) 소괄호로 쓰는 이유는 onClick함수에서 return을 생략하기 위해서다.
만약 { } 중괄호를 쓴다면, onClick함수 내부에 return 값이 있어야한다.
- 요소들을 함수로 만들어서 component 합치기
apple를 좀 더 편리하게 사용하기 위해서 다음과 같이 작업한다. const Apple = () => ( // apple을 자동으로 return하는 함수 Apple로 만들어준다 <h1 id="title" style={{backgroundColor:"red" , height:200}} onClick={() => 실행문} > H1 TEXT </h1> ); const Container = () =>( <div> <Apple /> // Apple함수는 다음과 같은 형태로 불러올 수 있고, 여기서는 <h1>태그를 불러온다 </div> ); ReactDOM.render(<Container />, 저장하고 싶은 id);
** 함수 표현법 2가지
const Container = () => ( <div> <h3>Total clicks: {counter}</h3> <button onClick={countUp}>Click me</button> </div> ); 위의 함수는 function Container(){ return <div> <h3>Total clicks: {counter}</h3> <button onClick={countUp}>Click me</button> </div> }; 와 같다.
4 _ STATE
: 일반 vanilla js로 만든 프로그램은 render 할 때 마다 관련 부분 태그를 전체 초기화한다.
하지만 react를 이용하면 react가 이전 render상황과 변경할 상황을 알고 있기 때문에
정확하게 변화가 일어나는 부분만 초기화된다.
- 누르면 카운트가 올라가는 기능을 react에서 쉽게 만들어보자
function Example() { const [count, setCount] = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
- React,useState() / useState() 함수는 매개변수를 초기값으로 가지고, [초기값, 조건식] 이라는 배열을 생성한다
button 태그에 onClick 이벤트를 달고 조건식을 만들어 주는 것으로, 초기값을 변화시킬 수 있다.
또한 useState가 바뀌면 리렌더링이 일어난다. 이 때 리렌더링은 변화된 값만 렌더링되기 때문에 페이지의 다른 요소들은 변화하지 않는다.
위의 코드는 클릭 이벤트가 일어날 때 마다 초기값을 1씩 증가시켜준다.
** 하지만 count를 이용하는 방법은 단점이 있다. count 변수가 다른 곳에서 사용되어 값이 정확하게 나타나지 않는
버그가 발생할 수 있다. 따라서
const onClick = () => {setCounter((current) => current + 1);};- 이 방법을 이용하자. setCounter 내부에 함수를 생성하고 current를 사용해서
현재 값에 대한 보장을 얻을 수 있다.
자바스크립트에서 사용중인 용어 ( for , class ) 등의 변수명들은 자바스크립트에서 먼저 사용하고 있기 때문에
jsx에서 똑같이 사용한다면 나중에 error가 발생할 수 있다.
class -> className
for -> htmlFor
5 _ jsx 에서 input 사용하기
: jsx 에서는 React.useState 를 이용해서 input 으로부터 값을 얻어낼 수도 있다.
값을 얻어내고자 하는 input 태그에 event를 걸고 (onClick 이라고 가정하자)
const [something, setSomething] = React.useState(0) const onClick = (event) => { setSomething(event.target.value); } <input value={somthing} onClick={onClick} />
- 이 코드를 통해서 우리는 input을 클릭하면 input의 value를 가져와서 something에 저장시키고 변화된 something을 input으로 돌려줄 수 있다. 물론 이 과정에서 변하는 요소들은 리렌더링 된다.
input의 value에 somthing을 돌려주는 이유는 외부에서도 value를 변화시킬 수 있게 하기 위함이다.
만약, value를 변화시키다가 event를 삭제한다면, value 는 더이상 변하지 않을 것이다 ( setSomething이 작동하지 않기 때문에)
즉 적절한 업데이트가 이루어지려면 value와 event 가(something과 setSomething이) 서로 상호작용 해야한다
6 _ flip 기능 구현하기 (23-03-15)
: flip 기능은 버튼을 눌러서 어떤 기능이 다르게 작동하도록 만들 수 있다 ( 예를 들면 전원을 껏다 키는 것 처럼 )
여기서는 minutes input과 hour input이 서로서로 시간변환을 할 수 있도록 만들어줄 것이다.
먼저, 각각의 input에 disable 속성을 걸어준다. disable에 걸리면, input의 value를 입력할 수 없게 된다.
그리고 React.useState() 를 이용해서 disable을 조절할 수 있도록 설정할 것이다.
이후에 각 input의 value에 삼항연산자( ternary operator ) 을 이용해서 분을 입력하면 시간으로,
시간을 입력하면 분으로 바꿔줄 것이다.
const [flipped, setFlipped] = React.useState(false); -> State의 초기값을 false로 줘서 input의 disable을 조절할 것이다. disable은 true일 경우 해당 input을 작동하지 않게 만든다. const onFlip = () => { reset(); setFlipped( (current) => !current ); }; -> onFlip 이벤트가 발생할 때 마다 해당 input을 리셋하고 setFlipped의 조건식에서 current를 사용해서 현재 state를 가져와서 !를 이용해 이를 반대 논리로 변환한다. minutse <input value={flipped ? amount * 60 : amount} disabled={flipped === true} /> hours <input value={flipped ? amount : Math.round(amount/60)} disabled={flipped === false} /> -> flipped의 초기값이 false 이므로 처음에는 hours가 disabled 되어있다가 onFlip 함수를 실행시키면 flipped의 값이 true가 됨으로 hours가 able이 된다. -> 각각의 value 도 flipped의 값이 true / false 일 때 달라진다.
** JSX 에서 disabled = { flipped } 와 disabled = { ! flipped } 로 조절할 수도 있다.
코드 정리하기 , select 활용하기
: 기존에 만들었던 function 들을 jsx에서는 간단하게 정리할 수 있다.
function aaa() {} 인 함수가 있다면, <aaa /> 의 형태로 선언할 경우 해당 함수(여기서는 컴포넌트) 를 불러올 수 있다.
이를 활용해서
const [ component , setComponent ] = React.useState("xx"); const onSelect = (event) => { setComponent(event.target.value); } -> "xx" 값을 기본값으로 하고, onSelect 함수가 실행될 때 마다 event에 나온 value값을 state에 저장한다 <select value={index} onChange={onSelect}> <option value="xx">Select your component</option> <option value="0">A</option> <option value="1">B</option> </select> -> html 문법으로, option을 선택하면 해당 option의 value를 onChange 이벤트로 보낸다 {component === "xx" ? "Select your component" : null} {component === "0" ? <component1 /> : null} {component === "1" ? <component2 /> : null} -> state(component 값) 이 동일할 경우 해당 component를 실행하고, 아니면 null 출력 ** 위의 방법으로 select - option을 통해 interactive한 웹 페이지를 구성할 수 있다
7 _ React component 활용하기 / props
: 웹 페이지를 제작하다보면 비슷한 형식의 요소들을 여러개 생성할 필요가 있다.
이럴 때 마다 각 요소의 style이나 script를 지정한다면 수정할 때 매우 힘들 것이다.
따라서 Java의 class, 객체 기능 처럼 javascript에서도 기본 틀을 지정해두고 요소들을 바꿔가면서 사용할 수 있다.
자식 컴포넌트 function Btn(props){ return <button style={{ 원하는 스타일 }}> {props.text}</button> -> Btn 컴포넌트를 생성할 때 props 라는 오브젝트 내부에는 컴포넌트를 생성할 때 선언한 keyword와 값들이 저장된다. -> 기본적으로 props 오브젝트에 저장된 값들은 {pros.keyword} 로 값을 불러와서 사용할 수 있다. 부모 컴포넌트 내부 <Btn keyword="Save" myevent="onClick" /> <Btn keyword="Don't Save" /> -> 컴포넌트를 생성하고자 할때 다음과 같이 keyword와 값을 함께 보낼 수 있다. ** Btn 함수의 매개변수인 props는 어떠한 이름으로 지정될 수 있으며, 심지어는 지정하지 않고 props 오브젝트에 저장된 keyword를 바로 불러올 수도 있다 ex) Btn( {keyword , myevent} ){ {keyword} onclick={myevent} } 컴포넌트를 선언할 때 어떤 요소를 저장하던지, 몇개를 저장하던지 함수의 첫번째 매개변수(오브젝트) 내부에 들어간다.
** 위의 코드에서 부모 컴포넌트 내부의 버튼 2개 중 하나의 버튼에만 변화가 있어도
변화가없는 버튼도 함께 re-render 된다.
이를 방지할 수 있는 방법이 있다.
const 변수명 = React.meno(자식 컴포넌트 명); -> 위의 명령어를 선언하면, 자식 컴포넌트에 일어난 변화로 인해 부모컴포넌트가 re-rending을 해도 부모컴포넌트 내에서 변화가 일어난 컴포넌트만 re-rending되고 변화가 없는 컴포넌트는 변화가 일어나지 않아서 모든 컴포넌트를 새로 로딩하지 않아도 된다.
props 검사하기 ( propTypes )
: 컴포넌트에 props를 넣어서 사용할 때 props에 알맞은 타입의 데이터가 들어갔는지, 꼭 필요한 값이 비어있진 않는지
유효성을 검사해야할 때가 있다. 이 때 propTypes 를 이용한다.
propTypes를 이용하려면 해당 프로그램을 import 하거나 다운받아야한다.
이용방법
자식컴포넌트명.propTypes = { text : PropTypes.string, fontSize: PropTypes.number.isRequired, } 위의 형태로 propTypes를 사용할 수 있다. 만일 해당 keyword의 props에 알맞지 않은 자료형의 값이 들어간다면 console에 경고가 뜬다. propTypes로는 일반 자료형 뿐 아니라 오브젝트 등의 여러가지 형태를 지정할 수 있고 빼먹지 말고 반드시 입력해야하는 keyword도 지정할 수 있다.
'React' 카테고리의 다른 글
OPEN API 데이터 불러오기 ( fetch ) (0) 2023.03.19 nomad) react .map( ) (0) 2023.03.17 nomad) react useState( [] ) 활용 (0) 2023.03.17 nomard) Clean Up 함수 (0) 2023.03.16 nomard) React 설치 및 연결 (0) 2023.03.16