function App() {
let posts = '강남 고기 맛집';
// useState를 이용해서 따봉 누를때 마다 0-> 숫자증가
let [따봉, 따봉변경] = useState(0);
let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']);
function 제목바꾸기() {
var newArray = [...글제목]; //값 복사, 공유가 아닙니다
newArray[0] = '여자코트 추천';
글제목변경(newArray);
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className="list">
<h3>{글제목[0]}<span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>{따봉} </h3>
<p>2월 17일 발행</p>
<hr />
</div>
App.js
import React from 'react';
function App() {
const sayHello = () => {
console.log('Hello')
}
return (
<div>
<h1>Hello React</h1>
<button onClick={sayHello}>Hello</button>
</div>
);
}
export default App;
Hello React 글자를 출력합니다
버튼의 이름은 Hello 입니다.
button 을 클릭하면 sayHello 함수를 호출합니다 콘솔창에 Hello 가 출력됩니다
App.js
import React from 'react';
import Tweet from './Tweet';
function App() {
return (
<div className="app">
<Tweet name="Dev ED" />
<Tweet name="John Snow" />
<Tweet name="Traversy Media" />
<Tweet name="Mosh" />
</div>
);
}
export default App;
Tweet.js 내용을 import 합니다. Tweet 을 import 하는데, name을 줬습니다
Tweet.js
import React from 'react';
import './App.css'
function Tweet(props) {
return (
<div className="tweet">
<h3>{props.name} </h3>
<p>This is a random Tweet</p>
<h3>Number of likes</h3>
</div>
);
}
export default Tweet;
App.js 에서 받은 name은 마치 자바의 파라미터 처럼 (여기선 property) 들어가서
중괄호를 적으면 출력할 수 있습니다.
name 말고
import React from 'react';
import Tweet from './Tweet';
function App() {
return (
<div className="app">
<Tweet name="Dev ED" message="오늘 점심은 무엇인가요?" />
<Tweet name="John Snow" message="오늘 저녁은 무엇인가요?" />
<Tweet name="Traversy Media" message="오늘 아침은 무엇인가요?" />
<Tweet name="Mosh" message="콘푸라이트 좋아해요?" />
</div>
);
}
export default App;
App.js 에 message를 적고
import React from 'react';
import './App.css'
function Tweet(props) {
return (
<div className="tweet">
<h3>{props.name} </h3>
<p>{props.message}</p>
<h3>Number of likes</h3>
</div>
);
}
export default Tweet;
p태그처럼 props.message 를 적으면 message도 가져 올 수 있어요