React9 React 이벤트 https://www.youtube.com/watch?v=s3cDPbcoy_4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7 onClick 이벤트가 일어났을때 function(event) event 매개변수를 가진 함수 실행 여기서 event는 event가 일어난 속성 즉 여기서는 a태그이고 event.preventDefault(); 즉 onclick이 일어나도 a태그의 이벤트가 일어나지 않도록 preventDefault()함수로 막았다 onChangeMode가 일어났을때 alret('header');라는 알람을 호출하는 메소드 정의 props.onChangeMode()를 해둠으로써 정의해둔 메소드를 onClick이 일어났을때 호출한다 결과 -------------.. 2023. 5. 1. ReactProps2 nav태그에 topics={topics} 속성을 준다 APP()함수를 만들고topics배열을 만들어 안에 태그안의 속성 정리를 한다 Nav속성에 props 매개변수를 파라매터 값으로주고 topics를 담을 lis배열을 생성한다 topics의 배열 길이만큼 for문을 돌리고 props.topics[i]번째 값을 t에 임시저장한다 lis에 push할때 태그를 넣고 push한다 return에 태그를 추가하여 return해준다 2023. 4. 30. ReactProps https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=6 에서 title="REACT"를 화면에 보여주기 위해서 PROPS라는 것을 사용한다 Header 함수에 props라는 메게변수를 넣어준다 이 'props'라는 함수를 console로 찍어보면 타입이 Object형태의 객체라는 것을 알 수있고 아까 title: "REACT"의 정보가 담겨있는 것을 알 수있다 이것을 {}표현식을 사용해 props.title을 해주면 이렇게 REACT로 쉽게 바뀌는 것을 알 수 있다 lis에 push할때 고유한 key값을 주어야 하므로 t.id값으로 설정해둔다 2023. 4. 30. 리엑트 Component https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5 컴포넌트 (Component)란? 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 예제 1.함수를 정의한다 현재 정의한 함수는 Header 함수에 return에 html의 headr와 h1으로 WEB이라고 하는 것을 return한다 APP()에서 부분에 아.. 2023. 4. 19. 이전 1 2 3 다음
