[리액트] 정리 5

1. props

- props는 첫번째이자 유일하게 전달받는 인자이다.

- props는 컴포넌트에 붙여준 모든 값을 보관하는 object이다.

- 같은 컴포넌트를 UI를 다르게 만들어서 사용할 수 있다. (재사용성)

- object이므로 여러개의  prop을 전달해줄 수 있고 각각 받아서 사용할수 있다. 

- 전달하는 props와 전달받은 props의 이름은 같아야 한다. 

- string, number, function 까지 props로 모든것을 컴포넌트로 넘겨줄수 있다. 

: {first, second, last} (ES6)

function Btn(props){ // props는 전달받은 것들을 전부 포함하는 object이다.
      return (		 // {text} 와 같이 바로 받은 것을 argument로 받을수 있다.	
        <button 
        style={{
          backgroundColor:"#1AAB8A",
          color:"#fff",
          border:"none",  
          height:"60px",
          fontSize:"1.6em",
          padding:"0 2em",
          cursor:"pointer",
          outline:"none",
        }}
        >
          {props.text} // {text} 로 가능 
        </button>
        );
    }

function App(){       
	return (
    	<div>
      	    <Btn text="Go"/> // props object에 속성 추가 
        	<Btn text="Leave"/> // props object에 속성 추가 
        </div>  
      );
    }

2. React memo

- 부모 컴포넌트의 state가 바뀌면 모든 자식 컴포넌트들은 re-render 된다. 

- 컴포넌트의 props가 바뀌면 re-render가 일어난다. 

- 이때 React memo 활용한다면 해당 컴포넌트의 props가 바뀌지 않는 이상 re-render가 일어나는 것을 방지해준다.(부모 컴포넌트의 변화가 모든 자식 컴포넌트에 영향을 끼치지 않음)

- 만약 부모 컴포넌트에 100개의 자식 컴포넌트가 달려있다면... 앱의 효율성을 위해서 react memo가 꼭 필요할것이다. 

const MemorizedBtn = React.memo(Btn);
    function App(){         
      const [value, setValue] = React.useState("Go");
      const [joon, setT] = React.useState(true);
      console.log(joon);
      console.log(value);
      const changeValue = () => 
        {
        setValue(joon ? "Oh yeah":"Go");
        setT(!joon);
        };
      
      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue}/>
          <MemorizedBtn text="Leave"/>
        </div>  
      );
    }

 

3. onClick에 여러 함수 넣기 

- 두 개 이상의 state를 한개의 함수에서 동시에 변화 하고 싶었다. 

- arrow function 어렵다... 

const [value, setValue] = React.useState("Go");
const [joon, setT] = React.useState(true);      
const changeValue = () => 
	{
     setValue(joon ? "Oh yeah":"Go");
     setT(!joon);
    };

https://bolob.tistory.com/entry/React-button-onClick%EC%97%90-%EC%97%AC%EB%9F%AC-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%84%A3%EA%B3%A0-%EC%8B%B6%EB%8B%A4%EB%A9%B4

React onClick에 여러 함수를 넣고 싶다면

4. PropsType

- props의 type을 미리 지정하여 잘못된 prop이 전달받는걸 방지해준다. 

- 사실상 props의 type을 잘못 전달받아도 React는 그것이 잘못된 것인지 모른다. (따라서 우리가 알려주자!)

- props : type 형태

- 필수적인 prop인 경우 .isRequired를 붙여준다. 

- import 필요함 

- 대소문자 주의... 

https://www.npmjs.com/package/prop-types

prop-types

Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number,
    };