[React] 리액트 컴포넌트 정리 (Component)

안녕하세요 리액트 시작했는데 뭔가 하나하나씩 포스팅 을 직접 하자니 괜히 게시물만 늘리는거 같고 그래서

한땀한땀 보단 한번씩 정리 해서 포스팅을 하려고합니다.

1. 생성 (컴포넌트)

리액트 컴포넌트는 생성시 파스칼 케이스를 따릅니다. 

gdlbutton  - X

gdlButton  - X

GdlBUtton - O

2. 값 전달 

props 는 부모에서 컴포넌트로 값을 전달하기 위한 속성입니다.

기본 세팅은 와 같이 합니다.  (props로 전달된 basic이없을 경우는 '베이직'이 사용됩니다.)

static defaultProps= {

basic:'베이직'

}

<GdlButton name={test} />

this.props.test

하지만 props가 너무 많은 경우에 대비해서

      예를 들면

props로  name,age,grades, class, email 등이 넘어 오게 되면

this.props.name

this.props.age

this.props.grades

.... 너무 길어집니다.

const {name,age,grades,class,email} = this.props; ( 비 구조화 할당을 사용합시다.)

state 는 컴포넌트 내부에서 이동되는 값입니다.

절대로 this.state.name = "test" 같은 작업은 하지 않습니다.

this.setState({

name : 'test'

}); 

setState를 사용하셔야 리렌더링이 발생합니다.

ref 는 컴포넌트에 있는 함수를 외부에서 호출할수 있도록 해주는  속성입니다.

// 1. 컴포넌트 객체에 ref를 선언하고 => 를 통해서 this.GdlButton = ref를 생성한다.

// 이와같지 하지 않고 this.GdlButton.button으로 바로 사용시에는 렌더링 전에 값이 undefined 이기때문(this.GdlButton)

<GdlButton ref={ (ref) => this.GdlButton= ref} />

// 2. 만들어진 this.GdlButton 을 이용하여 함수 사용 

<button type="button"  

onClick={()=> this.GdlButton.buttonsetText("setText")}>Ref Test</button>

class GdlButton extends Component {

// ref를 달기 위한 함수 작성 

buttonsetText= (addText) =>{

const{ innerText} = this.button;    

this.button.innerText = innerText+addText;

}

render(){

return (

<div 

// ref를 달아서 현재 컴포넌트를 리턴

ref={(ref) => {this.button=ref}}>

{/* .... do thing */}

</div>

);

}

}

export default App;

3. 컴포넌트 여러게 생성 

내부의 count만큼 버튼을 생성하고 싶은 경우

const btnList = Array(this.props.count).fill(null).map((i,index) =>{

return <button type="button" style={btnStyle} key={"Btn_"+index} >

                        {this.props.name +"_"+index}</button>;

});

주의점 ** key 값을 유니크하게 설정 해주어야 합니다. ( 리액트자체 렌더링시 해당 key 값을 통하여서 DOM비교를 하는 알고리즘을 가지고있기 때문에 설정 안할시 warning이 뜨긴하지만 성능 문제가 발생합니다. 키 값이 중복되면 에러가 발생)

Array(count) 로 카운트 만큼 생성 후 .fill을 통해 내부값을 채웁니다. (채워야 map 이 순환)

map을 통하여 채워진 배열만큼 버튼을 생성하여 return 합니다.

사용은 render 함수에서

return (

<Fragment>

{/* porps 로 count가 넘어오면 개수만큼 카운트 없으면

기본 버튼 렌더 */}

{

this.props.count ?

btnList :

<button type="button" style={btnStyle}

onClick={ ()=>{

this.setState({

dName: this.state.dName.split('_')[0]+"_"+this.state.number,

number:this.state.number+1

})

} }> {this.state.dName} </button>

}

</Fragment>

이와같이 사용합니다.

{ btnList } 

4. 컴포넌트 이벤트 전달 

이벤트 생성시에는 캐멀케이스(CamelCase)를 따릅니다.

on-click => onClick

onkeypress ==> onKeyPress 

클래스 내부에 함수를 선언후 바인딩합니다.

4-1 미리 선언된 함수 바인딩

handleEvent = ()=>{

console.log("precondition Event");

}

return (

<Fragment>

<button type="button" onClick={this.handleEvent}>handleEvent</button>

</Fragment>

);

           4-2 생성과 동시에 익명함수 사용

<button onClick={ ()=>{

console.log("Test");

}}></button>

5. 스타일 지정,클래스 지정  및 조건부 렌더링 방법

render() {

const btnStyle ={

display:"inline-block",

width:"auto",

border:"1px solid transparent",

borderRadius:"4px",

margin:'1px',

backgroundColor:"#5cb85c",

color:"#FFFFFF",

fontWeight:"400",

fontSize:"14px",

lineHeight:"1.42857143",

height:"100%"

}

<button type="button" style={btnStyle} />

와 같이 사용하며 주의할점은

background-color = 와 같은 케밥 케이스들은 캐멀케이스로 바뀌어야 한다.

backgroundColor

font-size = > fontSize

border-radius  = borderRadius

<div class  > </div> 가 아닌 <div className > </div> 으로 class가 아닌 className 을 사용 하여야 한다.

6. 이외

태그는 무조건 닫아야 합니다. /> 로  그래서 처음에 </br>로 엔터 효과를 내려고했으나  오류가 나서

<br/> 로 사용하여야 합니다.

주석은 

{ /* */ } 로 사용 

propTypes는 props의 타입을 지정할수 있습니다. ( ts 타입스크립트)와 비슷해보이지만

결국 런타임 후에 지정되는 것이고 ts는 런타임전에 알수 있기 떄문에 ts의 하위 호환이라고 봐도 되겠네요

constructor는 컴포넌트를 새로 만들어질때 호출된다. (아직 까진 사용의미를잘 모르겠습니다.)

state는 state = {

basic:'베이직'

}

기존의 state값중 array 가 있을 경우 push 를 해서는 안된다.(타 이벤트 핸들러에서)

push 를 하게되면 기존의 배열에 추가 되어서 더해지는 것이기 때문에 concat 이나 ... spread 연산자 slice를 통해 새로 생성후 합쳐서 새로운 배열을 대입해주어야 한다.

다음 은 리액트 라이프 사이클에 대해서 쓸건데 그전에 spread연산자부터 적고 가야겠네요