Component의 개념 정리
- 새로운 페이지를 관리 하기 위한 React 문법이다.
- 초기에 생성되는 App.js 도 일종의 Component이다.
function Modal(){ return ( <div className="modal"> <h2>제목</h2> <p>날짜</p> <p>상세내용</p> </div> ) } - function return 소괄호 안에다 선언을 한다.
- 선언에 Component를 html 문법에 선언이 가능하다.
<Modal></Modal> - Component 첫시작은 대문자로 시작해야 된다.
- return() 안에 있는건 태그하나로 묶어야 된다. 하나의 Html 태그로 시작하여 끝나야 한다.
return() 내부를 묶을때 의미없는
<div>쓰기 싫으면<></>Fragment로 처리하여도 무방하다.
Component를 만드는 기준
- 반복출현하는 Html 페이지부분에 선언하는것이 용이 하다.
- 사이트에서 자주 바뀌는 UI를 사용하면 재렌더링이 발생하기에 사용하기 좋다.
- 다른 페이지 만들때도 Component를 만드는게 좋다.
React에서 클릭시 동작하는 UI
if 조건문과 동일한 React 조건문 사용법
일반적인 javascript 동작 방식은 style=”display:block” 이런식으로 사용하지만 React에서는 다르다.
{ if(조건식) 실행할 코드 else 실행할 코드 }jsx중간에 변수놓고 싶으면 if문을 중괄호 안에 넣을수 없다 .- if문을 대신할
삼항연산자을 사용하도록 한다.{ 조건문 ? 참 : 거짓 }let [modal, modalChange] = useState(false); { modal === true //state값 데이터 조건문 ? <Modal></Modal> //component 를 호출가능 : null // html에서 빈공백으로 보여진다. }
map를 이용한 React 반복문 선언 방법
- javascript에서 map 함수 쓰는 법.
{map()}은 반복문과 유사하다.var newArray = array.map(function(a) { return a * 2 // a라는 데이터를 2곱해준다 }) - 글제목 갯수에 맞게 html을 생성 방법.
글제목.map( ()=> { return <div>hello</div> //html 그대로 작성하면 된다. })- 글제목이라는 Data에 갯수만큼 div를 생성이 가능해진다.
for문을 이용한 일반적인 사용방법
function forUI () {
var array = [];
for( var i = 0; i < 3; i++){
array.push(<div>hello</div>)
}
return array
}
forUI(); // 3개의 div가 생성된다. or { forUI() }
자식 Component 에 자료 전달
props 사용법
- 부모 Component에 선언된 State를 자식 Component에 전달 하기 위해서는 props를 이용한다.
- 부모 Component에 State값을 선언
<Modal 작명={state명}>이와 같이 선언해야지 자식 Component에 이용 가능. - 자식 Coponent는 param 함수
function Modal(props){}props param 데이터를 가져와서 사용이 가능하다.
/* 부모 콤포넌트 */
let [postion, postionChange] = {"서울","마산","부산"}
<Modal 지역 = {postion}></Modal>
/* 자식 콤포넌트 */
function Modal (props){
return (
<div> {porps.postion}</div>
)
}
Input의 입력값 state 변경
- state값을 input 데이터 클릭이 될때마다 state값을 변경하도록 하고
- 그이후에 변경된 값을 기존 state에 적용한다.
let [inputData, inputDataChange] = useState(''); //초기값 선언
<div className="public">
<input onChange= { (e)=> { inputDataChange(e.target.value)}}/>
//e.target.value input 타입의 정보를 변경 한다.
<button onClick ={ ()=> {
var arrycopy = [...글제목, inputData];
글제목변경(arrycopy) ;
}}>저장</button>
예전 버젼의 class를 이용한 문법 설명
class Profile extends React.Component { //class Propfile을 선언 React.Component를 상속 받는다.
constructor(){ //생성자 선언
super(); //super객체 선언
this.state= {name : 'kim', age : 30} //state 선언 방법
}
changeName = () => { //함수를 이용한 이름 변경법
this.setState( {name : 'park' })
}
render(){
return (
<div>
<h3> 프로필입니다</h3>
<p> 저는 {this.state.name} 입니다. </p> //state 선언 방법
<button onClick ={this.changeName}> 버튼 </button> //onClick 이벤트 발생후 함수 이용한 이름 변경
</div>
)
}
}
