💗 Shared State

가장 가까운 부모 컨포넌트의 state를 활요하는 것이 효율적
state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 활용하는 경우

💗 Lifting State Up

하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림!

//부모 컴포넌트

function Calculator(props){
  const [temperature, setTemperature] = useState('');
  
  const handleChange = (event) => {
    setTemperature(event.target.value);
  }
  
  return(
    <fieldset>
      <legend>섭씨 온도를 입력하세요: </legent>
      <input>
        value = {temperature}
        onChange = {handleChange}/>
      <BollingVerdict
        celsius={parseFloat(temperature)}/>
	</fieldset>
	);
}
      

//자식 컴포넌트
function BollingVerdict(props){
        if(props.celsius >= 100 ) {
          return <p>물이 끓습니다. </p>;
       }
        return <p>물이 끓지 않습니다.</p>;
      }

위의 코드에서 input을 다른 component로 분리시켜 보자

const scaleNames = {
  c: '섭씨',
  f: '화씨'
};

function TemperatureInput(props) {
  const [temperature, setTemperature] = useState('');
  
  const handleChange = (event) => {
    setTemperature(event.target.value);
  }
  
  return (
  	<fieldset>
      <legend>섭씨 온도를 입력하세요: </legent>
      <input>
        value = {temperature}
        onChange = {handleChange}/>
      <BollingVerdict
        celsius={parseFloat(temperature)}/>
	</fieldset>
	);
}
      

      
function Calculator(props) {
        return (
          <div>
            <TemperatureInput scale="c"/>
            <TemperatureInput scale="f"/>
         </div>
          );
        }