그 땐 Front했지/그 땐 React했지 (38) 썸네일형 리스트형 [생활코딩/React] 16. 이벤트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 이벤트 state props 그리고 render 함수 state 값에 따라 화면을 다르게 출력해보자! 💡리액트는 state 값이 변경되면 render 함수가 다시 호출된다. render는 HTML대로 화면을 다시 그리는 함수라고 생각하면 된다. //App.js this.state = { mode: 'welcome', subject: {title: "WEB3", sub: "world wide web!3"}, welcome: {title: "Welcome", desc: "Hello, React!!"}, contents: [ {id: 1,.. [생활코딩/React] 15. State 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. State 소개 👉🏻props는 사용자가 component를 조작할 수 있는 중요한 존재이다. ex) 전자 제품의 버튼 👉🏻state는 component 내부적으로 사용되는 것으로 사용자가 알 필요도 없고 알아서도 안 되는 것이다. ex) 전자 제품의 전선 2. State 사용 👉🏻현재는 props를 통해 값을 넘기는 하드코딩 상태이다. constructor(props) { super(props); } } 👉🏻어떠한 컴포넌트가 render될 때 어떠한 값을 먼저 초기화해야 한다면 그 내용을 constructor에 작성한다. const.. [생활코딩/React] 14. Component 파일로 분리하기 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. Component 파일로 분리하기 👉🏻src에 'component' 디렉토리를 만들어 각 컴포넌트 이름별로 파일을 만들어준다. //src/component/Subject.js import React, { Component } from 'react'; class Subject extends Component { render () { return ( {this.props.title} {this.props.sub} ); } } export default Subject; 👉🏻Subject 컴포넌트의 내용을 담아준다. 맨 위의 줄은 react.. [생활코딩/React] 13. React Developer Tools 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. React Developer Tools 👉🏻크롬 확장 프로그램을 깔아주자! 👉🏻리액트 개발자 도구를 사용하기 전까지 Element에서 HTML요소만 볼 수 있다. 👉🏻개발자 도구에서 리액트 component 탭에 들어가면 리액트에서 사용한 컴포넌트를 볼 수 있다. [생활코딩 / React] 12. props 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. props 현재 Subject라는 컴포넌트는 항상 같은 값을 출력한다. 용도에 따라 다른 내용을 출력할 수 있다면 얼마나 좋을까? 속성(props)을 활용해 이를 구현해보자! class App extends Component { render () { return ( ); } } 👉🏻다음과 같이 Subject 컴포넌트에 title과 sub라는 속성을 통해 값을 넘겨준다. class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); .. [생활코딩 / React] 11. 컴포넌트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 이 강의는 예전에 듣고 한 번 더 듣는 거라 앞의 설치과정이나 기본 내용들은 뛰어넘었다! 1. 컴포넌트 만들기 1 class Subject extends Component { render() { return ( WEB world wide web! ); } } 👉🏻다음과 같이 Subject라는 class를 만들어준다. class에는 render 함수가 꼭 필요하다. 👉🏻JS 최신 문법은 function을 명시하지 않아도 return을 보고 함수임을 알 수 있다. return 안의 html 코드에서는 하나의 최상위 tag만 써야 한다. ✍🏻r.. 이전 1 2 3 4 5 다음
