루체

HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷 이벤트 사용 시 주의사항 1. 이벤트 이름은 camelCase로 작성 2. 이벤트에는 함수 형태의 값을 전달. 3. DOM 요소에만 이벤트 설정 가능 div, button, input, from, span 등 DOM 요소에는 이벤트 설정 가능, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 하지만 전달 받은 props를 컴포넌트 배우 DOM 이벤트에 설정 가능 import React, {useState} from 'react'; function EventPractice () { const [text, setText] = useState(''); const onChange = (e) =>{ setText(e.target.value) ..

아무래도 책이 좀 예전꺼라 그런지 코드는 변경을 해야겠다.. 1. 파일 이름 마음대로 .js 하나 만든다. 초기 코드 import React from 'react'; function MyComponent () { return ( 나의 컴포넌트 ) } export default MyComponent 2. App.js에 MyComponent 사용하기 import React from 'react'; import Hello from './Hello'; import MyComponent from './MyComponent'; import Wrapper from './Wrapper'; function App() { return ( ); } export default App; 3. props도 사용해보기 //MyCo..

컴포넌트의 Props 개념 props는 properties의 줄임말. 컴포넌트에 값을 전달할 때 사용한다. props 사용법 App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name을 전달해주고 싶다면? //App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; //Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; props는 객체 형태로 전달되며 조회할 때는 props. 으로 조회를 한다 여러 개를 전달 /..

왜 리액트인가? 자바스크립트 기반 여러 프레임워크(Vue.js, ANGULAR.js)등은 MVC(Model-View-Controller)아키텍처, MVVM(Model-View-View Model)아키텍처, 앵귤러JS는 MVW(Model-View-Whatever) 아키텍처로 APP을 구조화한다. 위 아키텍처들의 공통점 모델과 뷰가 있다. 모델 : APP에서 사용하는 데이터를 관리하는 영역 뷰 : 유저에게 보여주는 부분 동작 : 프로그램이 유저에게 데이터를 받으면 데이터를 조회/수정하고, 변경 사항을 뷰에 반영한다. 예시) 다음 JSON 객체 값을 사용하는 뷰가 있다. { "title" : "Hello", "contents": "Hello World" } Hello Hello World contents의 값..