리액트 공부1일차
리앤트 기본적인 사용법
<body>
<div id="root"></div>
<script type="text/babel">
//컴포넌트 와 컨테이너 생성
const component=<h1>리액트기본</h1>
const container = document.getElementById('root')
// => 컴포넌트를 만들어서 컨테이너에 집어넣는다
//출력하기
ReactDOM.render(component,container)
</script>
</body>컴포넌트를 만들어 컨테이너에 집어넣어서 사용할수 있다
<script type="text/babel">
const name = '구름'
const imgurl = 'http://placedog.net/400/400'
const component= <div>
<h1>{name} 님 안녕하세요 ! </h1>
<img src={imgurl}/>
</div>
const container = document.getElementById('root')
ReactDOM.render(component,container)
</script>
클래스 이용방법
<script type="text/babel">
//클래스 생성
class App extends React.Component {
render() {
const items =
<div>
<h1>{this.props.name}</h1>
<img src={this.props.imgurl}/>
</div>
return <div>{items}</div>;
}
}
const container = document.getElementById('root')
ReactDOM.render(<App name="구름" imgurl="http://placedog.net/400/400"/>,container)위 와 같은 화면이 출력된다
클래스 같은경우 리턴값을 통해 보내고자 하는 내용을 기입할수 있
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date()
};
}
render() {
return <h1>{this.state.time.toLocaleTimeString()}</h1>;
}
componentDidMount() {
//컴퍼넌트가 화면에 나타날때
this.timerId = setInterval(() => {
this.setState({
time: new Date()
});
}, 1000);
}
componentWillUnmount() {
//컴포넌트가 화면에 제거될때
clearInterval(this.timerId);
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
</script>componentDidMount는 컴포넌트가 화면에 나타낼때에 실행되는 메소드로
현재 위 코드는 1초마다 componentDidMount 안의 내용이 실행되어서 현재 시간을 나타내는 코드이다
이벤트 연결하는방법
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
count : 0
}
this.countup = this.countup.bind(this)
//bind는 이벤트 연결해주는 메소드
}
render() {
return <div>
<h1>{this.state.count}</h1>
<button onClick={this.countup}>클릭</button>
</div>
}
countup (event) { //이벤트값이 들어갔을때
this.setState ({ //상태값에 접근하여 수정하겠다
count : this.state.count+1
})
}
}
const container = document.getElementById('root')
ReactDOM.render(<App />, container)이벤트가 발생할때 사용할 함수를 생성자 생성 하는부분에서 바인드 해주고
<button onClick={this.countup}>클릭</button> 이런식으로 이벤트를 연결해준다
위 코드는 번튼을 클릭할때마다 count가 증가하여 그걸 화면에 나타내는 코드이다
이때 state에 있는 값에 접근하기 위해서는 set을 이용해야한다
<script type="text/babel">
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
text : ''
}
this.handleChange = this.handleChange.bind(this)
}
render () {
return <div>
<input
value={this.state.text}
onChange={this.handleChange} />
<h1>{this.state.text}</h1>
</div>
}
// onChange은 HTML 요소의 값이 변경될 때 발생하는
// 이벤트입니다. 주로 <input>, <select>, <textarea>와 같은 폼 요소에서 사용됩니다.
// 사용자가 입력한 값을 감지하고 그에 따라 상태를 업데이트하거나 다른 동작을 수행할 수 있습니다.
handleChange (event) {
this.setState ({
text : event.target.value //현재 지정된 것의 벨류값을 받아온다
})
}
}
const container = document.getElementById('root')
ReactDOM.render(<App />, container)
</script>
스타일 변경
<script type="text/babel">
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
checked:false
}
this.handleClick = this.handleClick.bind(this)
}
render () {
const textStyle = {
color: this.state.checked ? 'blue' : 'red'
}
return <div>
<input
type="checkbox"
onClick={this.handleClick} />
<h1 style={textStyle}>글자</h1>
</div>
}
handleClick (event) {
this.setState({
checked:event.target.checked
})
}
}
const container = document.getElementById('root')
ReactDOM.render(<App />, container)
</script><h1 style={textStyle}>글자</h1>
textStyle에 변경할 스타일에 대해서 지정해주고 연결해주면 스타일이 바꿀수 있다
클래스를 연결시키는 방법
<script type="text/babel">
class App extends React.Component {
render () {
return <ul>
<Item/>
<Item/>
<Item2 value="3" />
</ul>
}
}
class Item extends React.Component {
render(){
return <li>Item 컴포넌트</li>
}
}
class Item2 extends React.Component {
constructor(props){
super(props)
}
render(){
return <li>{this.props.value}</li>
}
}
const container = document.getElementById('root')
ReactDOM.render(<App />, container)
</script>클래스 App는 Item 이라는 클래스와 Item2라는 클래스를 불러와 사용한다
(props는 부모의 껄 사용한다는 의미이다 그렇기에 item2에서 value값을 3이 된다 )
상속
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date()
};
}
render() {
return <ul>
<Item value={this.state.time.toLocaleTimeString()} />
<Item value={this.state.time.toLocaleTimeString()} />
<Item value={this.state.time.toLocaleTimeString()} />
</ul>
}
componentDidMount() {
//컴퍼넌트가 화면에 나타날때
this.timerId = setInterval(() => {
this.setState({
time: new Date()
});
}, 1000);
}
componentWillUnmount() {
//컴포넌트가 화면에 제거될때
clearInterval(this.timerId);
}
}
class Item extends React.Component {
constructor(props){
super(props)
this.state ={
value: props.value
}
}
componentDidUpdate (prevprops) {
if (prevprops.value !==this.props.value) {
this.setState({
value : this.props.value
})
}
}
render(){
return <li>{this.state.value}</li>
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);App클래스에서 Item 클래스 내부의 함수또한 실행된다
componentDidUpdate 메서드는 생성주기 메서드로 지정된 변수의 값이 변경 될때마다 실행한다
App의 componentDidMount() 에의해 1초마다 현재 시간에 대한 정보를 받아온다
그렇기 때문에 componentDidUpdate 실행되어 바꾼값을 화면에 계속 띄워준
연습
클래스 외부의 리스트값의 변경에 따라 화면에 나타나도록 만들어 보았다
MyComponent 클래스는 과일 이름과 과일 가격을 나타내는 클래스들이다
renderList() 함수는 현재 리스트 내용을 출력하도록 하는 함수이다
리스트값이 추가될때마다 renderList()를 실행하여 값을 계속 업데이트 한다
이때 const container = document.createElement('div'); 하지 않으면 계속 같은 공간에서만 나타나고 새로운 값이 다음 공간에 나타지 않고 현재 쓰여있는 공간에 덮어지기 때문에 새로운 div를 만들고 그 div에 MyComponent 를 실행한다
<body>
<div id="root"></div>
<input class="name" type="text">
<input class="price" type="text">
<button>제출</button>
<script type="text/babel">
let list=[['사과','1500'],['배','1000'],['귤','15000']]
// 리액트 컴포넌트 정의
class MyComponent extends React.Component {
render() {
return <div>
<h1>과일 이름 :{this.props.nu}</h1>
<h1>과일 가격 :{this.props.pr}</h1>
<br/>
</div>
}
}
// 과일 리스트를 렌더링하는 함수
function renderList() {
const root = document.getElementById('root');
root.innerHTML = ''; // 기존에 렌더링된 컴포넌트를 모두 제거
list.forEach(([name, price]) => {
const container = document.createElement('div');
root.appendChild(container);
ReactDOM.render(<MyComponent nu={name} pr={price} />, container);
});
}
const button =document.querySelector('button')
const nameInput =document.querySelector('.name')
const priceInput =document.querySelector('.price')
button.addEventListener('click',function(e) {
const name = nameInput.value;
const price = priceInput.value;
if (name && price) {
list.push([name,price])
console.log(list)
renderList()
}
})
renderList()
</script>
반응형
'html,css,js 공부 > React' 카테고리의 다른 글
| 리액트 Global State (0) | 2024.03.23 |
|---|---|
| React 메모이제이션 (0) | 2024.03.20 |
| React css 적용방법 (0) | 2024.03.19 |
| 리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 ) (1) | 2024.03.19 |