전진

React.js의 ", of } expected." 라는 에러.

종종 보는 에러지만 쉽게 고쳐지는 경우가 많았다. 하지만 며칠간 나를 괴롭힌 이 에러는 쉽게 고쳐지지 않았다.

어디가 어떻게 잘못 됐다고 알려주면 다행이지만 저렇게 그냥 메세지만 던져주면 모든 소스 코드를 다 뜨어 봐야 한다.

원인은 다음과 같았다.

return문안에 태그와 여러 소스 코드를 이용해서 코딩을 할것이다.

return <div>

{

if(true){

let string = str.replace("{", "");

return <div>

{ string }

</div>

}

}

</div>

return문안에 태그가 나오고 그 태그 안에서 다시 조건문을 이용하여 조건문에 맞는 내용을 리턴하는 코드.

이것저것 갖다 붙이다 보면 나도 모르게 시작과 끝을 알리는 중괄호("{}")를 생략하게 되면 에러가 발생하게 되지만 차근차근 한줄 한줄 다시 붙여 넣어봐도 어김없이 에러가 발생했다.

원인은..문자열을 가공하는데 replace를 이용하여 String에서 {}를 공백으로 바꿔주는 코드가 있었다.

replace파라미터 문자열로 중괄호가 있었던게 문제..

아마도 return문 안에서는 문자열로 선언된 중괄호도 허용을 하지 않는듯 싶다.

그러니 그 부분은 따로 function으로 만들어서(return문안에서 중괄호를 빼버리면 된다) 사용하면 된다.

이러한 에러는 인텔리제이 상에서 에러라고 표현하고 실제 소스가 돌아가는 상황에서는 괜찮은 에러인듯 하다.

하지만 이런 사소한 에러도 운영중에 시스템에 영향을 주지 않으리란 보장이 없기 때문에..

React.js를 하다보면 반복문안의 첫번째 태그에 key라는 attribute를 넣는다.

key라는 단어 답게 반복문 안에서 unique한 문자열을 가져야 한다.

for(let i in arr){

return <div key={"div" + i}></div>

}

처음에는 그냥 배열을 이용한 index값을 key값으로 사용했는데 unique한 키값을 이용하라는 에러메세지가 계속 발생해서..

위와 같이 문자열과 index값을 조합해서 사용중이다.

아무튼 React.js에서는 unique한 문자열을 key로 사용하라니 그 조건만 맞춰주면 된다.

React.js Component의 LifeCycle API..

constructor(){

}

componentWillMount(){

}

componentDidMount(){

}

render(){

}

React.js에서 Component 처음 구성 할때(?) 실행 되는 function들이다.

실행 순서는 constructor > componentWillMount > render > componentDidMount()의 순서대로 실행된다.

constructor는 생성자 function으로 제일 처음 실행 된다. state에 기본적인 데이터를 담는것을 정의 한다.

cmoponentWillMount에서는 Component가 만들어 지기 전에 실행 된다. 실제로 사용 해본적은 없다.

render는 Component의 렌더링을 담당하는 function으로 랜더링에 필요한 React.js 태그들을 넣는다.

componentDidMount는 랜더링이 다 끝난 뒤 실행 되는 function이다. 내가 사용하는 용도는 주로 데이터를 불러와 state에 데이터를 넣는 용도로 사용중이다.

여기 까지는 Component 생성시 실행 되는 function 소개.

출처 : https://velopert.com/1130 (VELOPERT.LOG)