props

React

[React] Event

2023.07.21

Event Header Component에서 onChangeMode props의 값으로 function를 전달한다. Header를 클릭했을떄 함수를 실행하고 싶을때 사용한다. 앵커태그에 onClick 이벤트를 걸어주면 앵커태그를 클릭했을때 function을 호출한다. 그리고 앵커태그를 클릭했을때 페이지 이동을 막을려면 onClick에 콜백함수로 들어간 함수가 호출될때 event 객체를 첫번째 파라미터로 주입해준다. event.preventDefault();로 앵커태그의 기본 동작을 방지한다. 그다음 props로 보내준 onChangeMode를 호출한다. Nav Component를 클릭했을때 id 1, 2, 3 별로 1, 2, 3이라는 alert을 띄우고 싶으면 Nav Component는 onChangeM..

React

[React] props

2023.07.20

props React에서 속성은 props 이라고 한다. Component에 props를 장착할려고 한다. props는 Header 함수에 WEB이라는 값에 속성을 넣지않고 Header Component에 속성을 넣고 싶을떄 사용한다. 위와 같이 Component에 속성을 Header 함수에 props.title을 사용할수있다 retrun 값에 들어가는 구문에 { } 중 가로를 사용한다. 중 가로에 있는 값은 일반적인 문자열이 아닌 표현식으로 취급되기 때문에 값이 반영된다. 목록같은것도 하드 코딩하는것 보다 props를 사용하여 topics의 배열에 저장하여 (id는 고유한 값으로 변경해야 한다.) lis의 배열안에 for문을 사용하여 i는 props.topics.length( )topics의 원소의 숫..

[React] Event

[React] props

티스토리툴바