React/Props

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. props를 사용하다 보면 실수로 잘못된 타입으로 props를 전달할 수 있다. 하지만 이러한 실수를 리액트는 알 수 없다. 이러한 문제를 예방하고자 리액트 팀이 개발한 PropTypes라는 이름의 패키지를 사용할 수 있다. PropTypes는 우리가 어떤 타입의 prop을 사용하고 있는지 체크해준다. PropTypes를 사용하기 위해 다음 코드를 추가해 준다. PropTypes를 추가한 코드 propTypes를 사용해 원하는 prop의 타입을 지정할 수 있다. 결과 화면 propTypes에 관한 자세한 설명은 다음 문서를 참고 바란다. https://www.npmjs.com/package/prop-types prop-type..

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. props를 통해 전달할 수 있는 것들에 대해 자세히 알아본다. 기존 예제 코드에 onClick function을 추가해 App 컴포넌트에 있는 무언가의 state를 바꾸어본다. function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return ( ); } 여기서 중요한 점은 우리가 만든 커스텀 컴포넌트에 작성하는 onClick은 Btn 컴포넌트로 전달되는 property라는 것이다. (실제 Event Listener가 아니다) function Btn(..

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. 지금까지 만든 코드를 살펴보면, 로직들을 고립시켜 분리된 컴포넌트로 재사용 가능하다. Props - Props는 프로퍼티 (properties)의 약자이다. - Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방식이다. 간단한 예제 결과 화면 지금 하고 있는 것은 단지 함수들을 호출하는 것이다. 이것을 함수형 컴포넌트라고 부른다. 함수형 컴포넌트는 function 으로 정의하고 return 문에 jsx 코드를 반환하는 특징을 가진다. 위 코드에서 아쉬운 점이 존재한다. 여러 버튼이 존재할때 각 버튼에 동일한 style을 적용하려면 동일한 코드를 버튼마다 추가 작성해줘야 한다는 것이다. 그러..