리액트 - 실습 리뷰
//HandIcon.js
import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';
const IMAGES = {
rock: rockImg,
scissor: scissorImg,
paper: paperImg,
};
function HandIcon({ value }) {
const src = IMAGES[value];
return <img src={src} alt={value} />;
}
//function HandIcon(props) {
// const src = IMAGES[props.value];
// return <img src={src} alt={props.value} />;
//}
export default HandIcon;구조분해를 사용하면 더 헷갈린다 흑흑.. 급히 복습하고 왔으니 다시 이해를 해보자
▶ HandIcon 함수는 파라미터로 받은 value에 맞는 이미지를 리턴하는 함수이다.
//HandButton.js
import HandIcon from './HandIcon.js';
function HandButton({ value, onClick }) {
const handleClick = () => onClick(value);
return (
<button onClick={handleClick}>
<HandIcon value={value}/>
</button>);
}
export default HandButton;HandButton 함수를 살펴보자
function HandButton({ value, onClick })
value, onClick 두 가지 속성을 받는다.
value : 버튼이 나타내는 값. 이 값에 따라 HandIcon이 렌더링할 아이콘이 결정된다.
onClick : 버튼이 클릭될때 호출될 함수. 이 함수는 value를 인자로 받는다.
const handleClick = () => onClick(value);
handleClick 함수를 정의한다. (정의만 하는거임.) = 이벤트 핸들러
- handleClick 함수는 클릭될때 호출된다.
- 이 함수는 onclick 함수를 호출하고, value를 onClick의 인자로 전달한다.
return (
<button onClick={handleClick}> onclick속성에 handleClick 함수를 지정하면, 버튼이 클릭될때 handleClick함수가 호출된다. (이벤트리스너 개념)
<HandIcon value={value}/> HandIcon의 value 프로퍼티 = {value} 즉,
Handbutton에서 받은 value 값이 HandIcon의 value로 할당된다.
</button>);
//App.js
import HandButton from './HandButton';
function App() {
const handleClick = (value) => console.log(value);
return (
<div>
<HandButton value="rock" onClick={handleClick} />
<HandButton value="scissor" onClick={handleClick} />
<HandButton value="paper" onClick={handleClick} />
</div>
);
}
export default App;App 함수를 살펴보자
1. handleClick함수를 정의한다.
value를 인자로 받아서 콘솔에 출력한다.
2. HandButton 함수를 실행한다.
HandButton 함수는 버튼요소를 반환한다. 각각의 value, onClick 이벤트리스너를 지정해준다.
지피티한테 함수 흐름 설명해달라고 해봄
1. App.js
1)애플리케이션의 루트 컴포넌트이다.
: 애플리케이션의 최상위 컴포넌트를 의미하며, 이 컴포넌트는 다른 모든 하위 컴포넌트를 포함하거나 렌더링 하는 역할을 함으로써 애플리케이션의 전체 구조를 형성한다.
2) HandleClick이라는 함수를 정의한다.
: 이 함수는 클릭된 버튼의 value를 콘솔에 출력한다.
3) 세개의 HandButton을 렌더링하며 각 HandButton에 'value'와 'onClick' prop을 전달한다.
: 버튼 요소에 value라는 속성이 추가되고, 이벤트 리스너로 handleClick을 할당
2. HandButton.js
1) value, onClick이라는 두개의 prop을 받는다.
: value는 버튼의 값으로, HandIcon 컴포넌트에 전달된다.
onClick은 버튼 클릭 시 호출된 함수이다.
2) HandleClick이라는 함수는 버튼이 클릭되면 호출된다.
이 함수는 onClick prop을 호출하고, value 를 인자로 전달한다.
3) 버튼 렌더링
: 버튼 요소에 onClick 이벤트 핸들러로 handleClick을 전달한다.
HandIcon 컴포넌트를 렌더링해서 value를 prop으로 전달한다.
3. HandIcon.js
1) value prop을 받아와서 해당 값에 맞는 이미지를 렌더링 한다.
2) IMAGES 객체에서 value에 맞는 이미지 경로를 가져와 <img> 태그의 src 속성으로 설정한다.
각 컴포넌트에서 HandleClick 함수가 중복되서 정의된다.. 역할과 위치에 따라 다르게 동작한다고함..
- HandButton의 handleClick: 버튼 클릭 시 부모로부터 전달받은 onClick 함수를 호출하고, 클릭된 버튼의 value를 인자로 전달합니다.
- App의 handleClick: 버튼 클릭 시 value를 콘솔에 출력하는 함수로, HandButton에 onClick prop으로 전달됩니다.
import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';
const IMAGES = {
rock: rockImg,
scissor: scissorImg,
paper: paperImg,
};
function HandIcon({ value }) {
const src = IMAGES[value];
return <img src={src} alt={value} />;
}
function HandButton({ value, onClick }) {
const handleClick = () => onClick(value);
return (
<button onClick={handleClick}>
<HandIcon value={value} />
</button>
);
}
function App() {
const clickConsole = (value) => console.log(value);
return (
<div>
<HandButton value="rock" onClick={clickConsole} />
<HandButton value="scissor" onClick={clickConsole} />
<HandButton value="paper" onClick={clickConsole} />
</div>
);
}
export default App;코드를 다시 봐보면
App에서 clickConsole함수를 정의한다. → value 를 받아서 콘솔에 value를 출력하는 함수이다.
그리고 핸드버튼 컴포넌트 세개를 반환하는데, value와 onClick prop에 값을 전달한다.
HandButton에서 handleClick함수를 정의한다. → onClick prop을 호출하고, 아규먼트로 value를 준다
그리고 버튼 요소를 리턴하는데 이 버튼 요소의 onClick 이벤트가 발생하면 handleClick이 실행된다.
→ onClick(value)를 실행한다. → value가 부모 컴포넌트에 전달된다. = console에 출력
근데 어떻게 부모한테 전달해준다는건지 모르겠음 ㅜㅜㅜ 박대가린가..
버튼 요소 안에는 HandIcon 이 호출된다. value prop에 value값을 전달한다.
\
코드잇 집단지성의 힘! !
1. App.js에서 handleClick 함수이름을 바꿔주었다.
2. 리액트 문법에 대해 이해가 필요하다. :
DOM 요소에만 이벤트를 설정할 수 있습니다.
즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다.
예를 들어 다음과 같이 MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함
수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐입니다.
<My Component onClick={doSomething}/>따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없습니다. 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있죠.
[출처 : 리액트를 다루는 기술]
컴포넌트에는 이벤트를 설정할 수 없기 때문에, <Button>컴포넌트(onClick은 그냥 props. 동작x) 에서 handleClick 이라는 함수 형태의 (value)값을 HandButton 함수의 인자값으로 전달하고 진짜 Dom요소인 <button>태그에 클릭 이벤트로 처리한 것 같습니다.