[javascript] 리액트 ( React )

October 18, 2022

“혼자 공부하는 자바스크립트” 스터디 모임 정리 노트 입니다. 📚

리액트의 기본

React는 사용자 인터페이스를 쉽게 구성할 수 있도록 도와주는 Javascript Library이다.

공식문서 : https://ko.reactjs.org/

준비하기

개발을 위한 JS파일을 HTML 파일에 읽어온다.

<!-- React를 사용하기 위한 파일 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- React코드를 쉽게 작성할 수 있게 해주는 라이브러리 -->
<script src="https://unpkg.com/babel-standalone@6/umd/babel.min.js"></script>

기본 코드를 작성한다.

<body>
    <div id="root">    </div>
	<!-- React code -->
    <script type="text/babel">
	const COMPONENT_NAME = <h1>리액트</h1>				  // 컴포넌트 : 화면에 출력될 요소
	const container = document.getElementById('root')	// conponent를 render할 HTML요소
  	
	ReactDom.render(component, container)
    </script>
</body>

JSX 문법

JSX문법은 컴포넌트를 만들 때 사용하는 문법이다. HTML태그 표현식을 기본으로하며 표현식 내 {} 기호를 통해 Javascript를 삽입할 수 있다.
```
const name = 'Jane'
const component = <div>이름 : {name}</div>		// 이름 : Jane
```

클래스 컴포넌트

javascript의 클래스 형태로 컴포넌트를 만드는 방식이다. React.Componenet 클래스를 상속받아 컴포넌트로서 동작할 수 있게 한다.

class COMPONENT_NAME extends React.Component{
	render(){
		return 출력할 JSX코드
	}
}

클래스 컴포넌트는 부모 클래스인 React.Component의 메소드를 오버라이드 할 수 있는데, 주요 메소드는 아래와 같다.

class COMPONENT_NAME extends React.Component{
    constructor (props){
        // 생성자 메소드. this와 prop를 이용해 객체를 생성할 수 있다.
        super(props)		// 상속받았기때문에 super 함수를 사용해 부모의 생성자를 먼저 호출해야한다.
        this.state = { }	// Rendering을 위해 state를 생성한다. rendering과 관계된 내용은 DOM에서 확인할 수 있다.
          
  
    }
      
    conponentDidMount(){
        // 컴포넌트가 화면에 출력될 때 호출되는 함수
    }
      
    conponentWillUnmount(){
        // 컴포넌트가 화면에서 제거될 때 호출되는 함수
    }
      
	render(){
        // 화면에 출력해줄 함수
		return 출력할 JSX코드
	}
}

그 외 함수는 component lifecycle에서 확인할 수 있다.

이벤트 연결하기

메소드 선언
메소드에 this를 바인드 한다.
render()메소드에서 이벤트 속성에 연결한다.

class COMPONENT_NAME extends React.Component{
	constructor (props){
        super(props)
        this.METHOD_NAME = this.METHOD_NAME.bind(this)	// 2. this를 바인드한다.
    }
  
    }
	render(){
		return <input type="button" onClick="this.METHOD_NAME" />	// 3. 이벤트 함수를 이벤트 속성에 연결한다.
	}
  
	METHOD_NAME (event) {		// 1. Method를 선언한다.
        // 이벤트가 실행될 때 호출할 코드
    }
}

리액트와 데이터

다수의 컴포넌트를 사용하는 방법과 컴포넌트 간 데이터 전달 방법

다수의 컴포넌트 사용하기

<script type="text/babel">
    class App extends React.Component{
    render(){
	    return <ul>
	    		<Item />			// Item component를 렌더링한다.
			   </ul>
    	}
    }
      
    class Item extends React.Component{
        constructor(){
            super()
        }
        render(){
        	return <li>Item</li>
        }
    }
      
const container = document.getElementById('root')
ReactDOM.render(<App />, container)	// App component를 렌더링한다.
</script>

이 때 App을 부모 컴포넌트, Item을 자식 컴포넌트라고 한다.

부모가 자식에게 데이터 전달하기 ( props )

<script type="text/babel">
    class App extends React.Component{
    render(){
	    return <ul>
	    		<Item value="인형"/>			// Item component로 데이터를 전달한다..
			   </ul>
    	}
    }
      
    class Item extends React.Component{
        constructor(props){					 // 부모 컴포넌트에서 전달한 데이터를 받아온다.
            super(props)
        }
        render(){
        	return <li>Item : {this.props.value}</li>	// 전달한 데이터를 출력한다.
        }
    }
      
const container = document.getElementById('root')
ReactDOM.render(<App />, container)
</script>

자식이 부모의 state 속성 변경하기

<script type="text/babel">
    class App extends React.Component{
        constructor (props) {
            Super(props)
            this.state = {value:''}
        }
          
        this.changeParent = this.changeParent.bind(this)		// 1. this를 바인딩해준다.
          
        render(){
            return <div>
	                 <Item onChange={this.changeParents}> />	// 2. 바인딩한 함수를 자식에게 전달한다.
	                 <h1>{this.state.value}</h1>
            	   </div>
        }
          
        changeParent (event) {
            this.setState({ value: event.target.value })	// 4. 자식에게 받아온 event 매개변수를 통해 함수가 실행된다.
        }
          
    }
      
    class Item extends React.Component{
        constructor(props){					.
            super(props)
        }
        render(){
        	return <input onChange={this.props.onChange}	// 3. input 태그의 내용이 변경될 때 부모에게 전달받은 메소드를 호출한다.
        }
    }
      
const container = document.getElementById('root')
ReactDOM.render(<App />, container)
</script>

Rose

리액트의 기본

리액트와 데이터