Frontend/React6 State 입력 (Prop) 통해 return값(출력) 만들면 prop과 함께 새로운 리턴을 만드는 역할의 state -> UI 바꿈 prop은 외부자, state는 내부자 id는 setID로 설정함. 태그속성으로 바뀌면 문자열로 바뀜. 2023. 2. 17. Event 이벤트 발생시 함수를 호출해서 이벤트 발생하게 함. like onclick 유사 a태그. event 객체로 사용 a태그의 기본으로 링크이동을 막는 event.preventDefault(); event.target (이벤트를 동작하게 만든 요소) import logo from './logo.svg'; import './App.css'; function Nav(props) { const lis =[]; for(let i=0; i{t.title}); } return ( {lis} ); } function Article(props) { return {props.title} {props.body} } function Header(props) { //console.log('props', props, props.ti.. 2023. 2. 17. props (속성들) https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5 우리가 만든 컴포넌트도 속성(prop)을 가진다면? 중괄호는 표현식 -> 그대로 나오지 않음 5분 2초부터 함수안에서 바뀌지 않는것을 const로 지정해주기 많으니까 배열로 생성, * const와 let의 차이점 비교하기 import logo from './logo.svg'; import './App.css'; function Header(props) { console.log('props', props, props.title); return {props.title} } function Nav(props) { // const lis = [ //.. 2023. 2. 15. 컴포넌트 만들기 https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4 사용자정의 태그를 만들고 싶다? 가장 중요한 개념 => 함수를 정의하면 됨!! (반드시 대문자로 시작하기 - 소문자는 html 태그) : 사용자 정의 태그가 곧 컴퍼넌트이다. ※ article 태그란? 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다. ※ header 태그 흔히 썼던 ~ 태그를 포함하는 문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용 function App() { return ( **소괄호임** 내용 ) ; } # 최종 코드 import logo .. 2023. 2. 15. 소스코드 수정방법 https://www.youtube.com/watch?v=XQ-XqLVJBwg&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=3 index.js가 입구이고 전역적인 설정이 들어감. App.js는 화면 구성하는 것.App.css는 디자인을 구성하는 파일 => 해당 웹페이지index.css는 index의 디자인이 포함된 파일index.js파일을 읽고 동작을 시킴. (npm start 시키면) 를 주석처리하면 기존의 화면이 없어짐을 알 수 있다. -> UI 전체!! 이 UI 전체는 4번째 줄의 App에서 왔고 이 App은 ./App(현재 폴더에서 App.js)에서 왔다. 마찬가지로 App.js에서 App()이란 함수에서 클래스이름이 App이면 실행되는 것을 주석처.. 2023. 2. 15. React 시작하기(환경구축) 내용 정리 출처 : 생활코딩 React 2022 개정판 https://www.youtube.com/watch?v=AoMv0SIjZL8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=1 React는 사용자 정의 태그이며 자바스크립트를 기반으로 만들 class문법과 함수 문법으로 React를 만들 수 있다. 요즘은 함수문법으로 만든다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React를 쓰는 방법으로는 개발환경을 구축할 수 도 있지만, 온라인 플레이그라운드를 이용해 쓸 수도 있다.. 2022. 9. 4. 이전 1 다음
