Je개발 일지

1. 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 JSX 태그에 props 로 전달해야 한다 export default function Button() { return ( I don't do anything ); } 이 버튼을 클릭하면 Alert 을 띄우는 기능을 추가하려면 다음의 세 가지 단계를 거쳐야 한다 Button 컴포넌트 안에 handleClick (이름은 단순히 함수명으로 원하는 대로 지으면 됨) 이라는 함수를 선언 해당 함수 내부의 로직 구현 태그에 onClick porps 로 handleClick 추가 export default function Button() { function handleClick() { alert('You clicked me!'); } r..

화면의 일부 항목은 입력에 따라 업데이트 된다. 이번 챕터에서는 state를 업데이트하고, 시간에 따라 다른 값을 보여주는 컴포넌트를 작성하는 방법을 배울 것 1. 이벤트에 응답하기 이벤트 핸들러는 사용자 상호작용에 반응해서 호출되는 자체 함수다 과 같은 기본 제공 컴포넌트는 onClick 과 같은 기본 제공 브라우저 이벤트만을 지원한다 하지만, 컴포넌트 생성하고 이벤트 핸들러 props 로 원하는 이름을 지정할 수 있 function Toolbar({ onPlayMovie, onUploadImage }) { return ( Play Movie Upload Image ); } export default function App() { return ( alert('Playing!')} onUploadImag..

React는 컴포넌트를 엄격하게 순수 함수로 작성하도록 강제한다 그렇기에 React 코드를 짤 때 몇 가지 규칙을 준수해야만 한다. 1. 순수성 : 수식으로서의 컴포넌트 컴퓨터 과학에서 순수 함수는 다음의 특징을 지닌다. 자신의 일에만 신경 쓴다 : 호출되기 전에 존재했던 객체나 변수를 변경하지 않는다 동일한 값을 입력 받으면 항상 동일한 결과를 반환해야 한다. : 컴포넌트가 이런 순수성을 유지한다고 하는 건 어떤 데이터를 받든, 그 데이터를 받을 때마다 항상 동일한 화면을 보여줘야 함을 의미한다. 2. 사이드 이펙트 React 렌더링 프로세스는 항상 순수해야 한다. : 컴포넌트는 JSX 만을 반환해야 한다. : 렌더링 존재한 객체나 변수를 변경해서는 안 된다. let guest = 0; function..

Javascript 배열 메서드를 활용해서 데이터 배열을 조작할 수 있다 1. 배열에서 데이터 렌더링하기 Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 목록 항목의 유일한 차이점은 콘텐츠, 즉 데이터다 이런 데이터들을 자바스크립트 배열에 저장하고, map 이나 filter 등을 사용해 컴포넌트 목록을 렌더링할 수 있다. Step 1) 데이터를 배열에 넣기 const people = [ 'Creola Katherin..

컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 종종 발생한다 1. 조건부로 반환하는 JSX 상품이 포장됐는지를 표시하는 여러 컴포넌트를 렌더링하는 컴포넌트가 있다고 가정해보자. function Item({ name, isPacked }) { return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 여기서 Item 컴포넌트에 isPacked prop 이 true 인 경우, 패킹된 아이템에 체크 표시를 추가하고자 한다면 if/else 구문으로 렌더링할 수 있을 것 if (isPacked) { return {name} ✔; } return {name}; 위 방법은 isPack..