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..
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의 원소의 숫..
Component 사용자 정의 태그를 만드는것이라고 이해하면 편하다. 이걸 React에서는 Component 라고 명한다. React에서 Component는 항상 대문자로 시작 Ex) Layout 한다. 이렇게 여러 부품을 만들어서 한곳에서 조립하면 생산성을 획기적으로 끌어 올릴수 있고 다른 이에게 공유도 편리하다. 이것이 React의 본질이라고 할수있다.
Visual Studio Code(Vscode) https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 홈페이지에 접속하여 Visual Studio Code를 설치한다. Node.js https://no..
React Library Single Page Application ex>Naver Vibe, Flipkart, Instagram을 확인해보면 페이지 전환이 새로고침없이 부드럽게 동작한다. 이런 사이트들을 SPA라고 하는데 SPA의 장점은 HTML 파일을 1개만 사용한며 다른 페이지를 보여주고 싶을때 HTML만 교체해주면 되기 떄문에 동작이 부드럽다. JavaScript로도 가능하지만 코드가 너무 길어지기 때문에 React라는 JavaScript Library를 설치하여 더 간편하게 만들수있어 React Library를 사용한다. 또는 HTML을 함수, Array, Object 같은 곳에서 보관하여 재사용할수있어 큰 프로젝트일수록 관리가 편해진다. 그리고 JSX(JavaScript + xml)도 지원하며..
