리액트 기초 (1) - props, state, 이벤트 처리

Props

Component에 원하는 값을 넘겨줄때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열등 JavaScript의 요소라면 제한이없다. 주로Component의‘재사용’을 위해 사용한다. props는 읽기 전용으로 임의로 값을 변경해 사용해선 안되고 변경하고 싶다면 새로운 변수를 생성해야 한다.

props를 활용해 component 만들기

const Greeting = (props) => {
    return <h1>{ props.username }</h1>
}

export default Greeting;

const Greeting = (props) => {
    const { username } = props;
    return <h1>{ username }</h1>
}

export default Greeting;

const Greeting = ({ username }) => {
    return <h1>{ username }</h1>
}

export default Greeting;

 

다른 파일에서 사용할 때

import Greeting from './components/Greeting';

function App() {
  return (
    <div className="App">
        <div><Greeting username='김민수' /></div>
    </div>
  );
}

 

Object를 전달받는  component 만들기

const Student = ({ student }) => {
  const strPass = student.score >= 80 ? 'PASS' : 'FAIL';
  return (
  <>
  <div>
    {student.name} 학생은 {student.subject} 수업을 수강중입니다.
    <br />
    현재 점수는 {student.score}점으로 {strPass} 입니다.
  </div>;
  </>
  )
};

export default Student;

 

import Student from './components/Student';

function App() {

    const student1 = {
    name: "김민수",
    subject: "수학",
    score: 88
    }
    
    const student2 = {
    name: "홍길동",
    subject: "영어",
    score: 72
    }


  return (
    <div className="App">
    <Student student={ student1 } />
    <Student student={ student2 } />
    </div>
  );
}

 

State

Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운값으로 변경될 수도 있다. State 값이변 경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다. State 값을 직접 변경하게 되면 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못한다. 반드시 setState함수를 이용해 값을 변경해야한다.

 

State를 변경하는 방법

함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경 된다. 현재값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 사용한다.

• setState내에 변경할 값을 넣기

const[count, setCount] = useState(0);setCount(count + 1);

• setState에 함수를 넣기

const[count, setCount] = useState(0);setCount((current) => {
	return current+ 1
    })

 

State 기초

function App() {
    const [ count, setCount ] = useState(0);
  return (
    <div className="App">
    <span>{count}회 클릭하였습니다.</span>
    <button onClick={() => {
        setCount(count + 1);
    }}>클릭</button>
    </div>
  );
}

 

Object를 갖는 State

새로운 객체를 생성해 기존값을 복사해서 변경해야 한다.

function App() {
  const [person, setPerson] = useState({
    name: '김민수',
    count: 0,
  });
  return (
  <div className="App">
    <button onClick={() => {
        setPerson((current) => {
            const newPerson = { ...current };
            newPerson.count = newPerson.count + 1;
            return newPerson;
        })
    }}>클릭</button>
    <span>{ person.name }님이 버튼을 { person.count }회 클릭하였습니다.</span>
  </div>
  );
};

 

person object 안의 count가 변경되었지만 person 자체는 변경되지 않았기 때문이다.

 

이벤트

이러한 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 이벤트(event)라고 한다. 이벤트는 유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있다. 이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다. 이벤트 핸들링 함수에서는 다양한 로직을 처리하고 그 결과를 사용자에 출력하여 알릴 수도 있다. 이벤트 핸들링 함수는 별도로 선언하거나 Element 내부에 익명 함수로 전달할 수도 있다.

 

이벤트 처리 방법

• 핸들링 함수 선언

function App() {
    const handleChange = (event) => {
        console.log(event.target.value)
    };
  return (
    <div className="App">
        <input onChange={handleChange} />
    </div>
  );
}

• 익명 함수로 처리

function App() {
  return (
    <div className="App">
        <input onChange={(event) => {
            console.log(event.target.value)
        }} />
    </div>
  );
}

 

자주쓰이는 DOM 이벤트

• onClick: Element를 클릭했을 때
• onChange: Element의 내용이 변경 되었을 때(input의 텍스트를 변경, 파일선택 등)
• onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때
• onDoubleClick: Element를 더블클릭 했을 때
• onFocus:Element에Focus되었을 때
• onBlur: Element가Focus를 잃었을 때
• onSubmit: Form Element에서Submit 했을 때

 

이벤트명명법

“on” + 동사 또는 “on” + 명사+ 동사 형태로 작성한다.

예시: onClick, onButtonClick, onInputChange 핸들링 함수의 경우 마찬가지로 “handle” + 동사 또는 “handle” + 명사+ 동사의 형태로 작성하며, “handle” 대신 이벤트명과 동일한 “on”을 앞에 붙인다.

 

이벤트와 state 연동하기

function App() {
    const [inputValue, setInpuValue] = useState('');

  return (
    <div className="App">
        <input onChange={(event) => {
            setInpuValue(event.terget.value)
        }}/>
        <span>{inputValue}</span>
    </div>
  );
}

 

 

한 개의 이벤트 핸들러를 여러 Element에 재사용하기

function App() {
  const [person, setPerson] = useState({
    name: '김민수',
    school: '엘리스대학교',
  });

  const handleChange = (event) => {
      const { name, value } = event.target;
      setPerson((current) => {
          const newPerson = {...current};
          newPerson[name] = value;
          return newPerson;
      })
  }

  return (
  <div className="App">
    <input name="name" value={person.name} onChange={handleChange}/>
    <input name="school" value={person.school} onChange={handleChange}/>
    <button onClick={() => {
        alert(`${person.name}님은 ${person.school}에 재학중입니다.`)
    }}>클릭</button>
  </div>
  )
}

 

 

다른컴포넌트로 이벤트 전달하기

const MyForm = ({ onChange }) => {
  return <input onChange={onChange} />;
};

export default MyForm;

import MyForm from './components/MyForm';

function App() {
  const [username, setUsername] = useState('');
  return (
  <div className="App">
    <h1>{username}님 환영합니다.</h1>
    <MyForm onChange={(event) => {
        setUsername(event.target.value);
    }}/>
  </div>
  )
}

 

 

생명주기

생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다. 컴포넌트가 실제 DOM에 삽입되는 것을 마운트, 컴포넌트가 변하는 것을 업데이트, 컴포넌트가 DOM 상에서 제거되는 것을 언마운트라고 한다.

• constructor(): State 데이터를 초기화 하는 메소드
• render(): 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드
• componentDidMount(): 컴포넌트가 마운트 된 직후 호출되는 메소드
• componentDidUpdate(): 업데이트가 진행된 직후에 호출되는 메소드
• componentWillUnmount(): 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 메소드

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript