nomard) ReactJS 기본, useState, Component, props

 

setCounter((current) -> current +1)
=> current와 함수를 이용해서 현재 값을 보장받는다

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

 

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

react를 이용해서 태그를 html로 rendering 했다.

 

** 함수 표현법 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 일 때 달라진다.

minutes에 값을 넣었을 때

Flip을 이용해 hours에 값을 넣었을 때

** 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}
 }
 
 컴포넌트를 선언할 때 어떤 요소를 저장하던지, 몇개를 저장하던지
 함수의 첫번째 매개변수(오브젝트) 내부에 들어간다.

Btn() 함수를 만들고 Btn함수에 text만 넣어서 버튼 2개를 생성함

 

** 위의 코드에서 부모 컴포넌트 내부의 버튼 2개 중 하나의 버튼에만 변화가 있어도

변화가없는 버튼도 함께 re-render 된다.

이를 방지할 수 있는 방법이 있다.

const 변수명 = React.meno(자식 컴포넌트 명);
-> 위의 명령어를 선언하면,
자식 컴포넌트에 일어난 변화로 인해 부모컴포넌트가 re-rending을 해도
부모컴포넌트 내에서 변화가 일어난 컴포넌트만 re-rending되고
변화가 없는 컴포넌트는 변화가 일어나지 않아서 모든 컴포넌트를 새로 로딩하지 않아도 된다.

 

---

props 검사하기 ( propTypes )

 : 컴포넌트에 props를 넣어서 사용할 때 props에 알맞은 타입의 데이터가 들어갔는지, 꼭 필요한 값이 비어있진 않는지

유효성을 검사해야할 때가 있다. 이 때 propTypes 를 이용한다.

<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>

 

propTypes를 이용하려면 해당 프로그램을 import 하거나 다운받아야한다.

 

이용방법

자식컴포넌트명.propTypes = {
	text : PropTypes.string,
    fontSize: PropTypes.number.isRequired,
}

위의 형태로 propTypes를 사용할 수 있다.
만일 해당 keyword의 props에 알맞지 않은 자료형의 값이 들어간다면 console에 경고가 뜬다.

propTypes로는 일반 자료형 뿐 아니라 오브젝트 등의 여러가지 형태를 지정할 수 있고
빼먹지 말고 반드시 입력해야하는 keyword도 지정할 수 있다.