[TIL]21.12.13

컴포넌트 안에 렌더링되는 태그안에 {}를 사용하여 JS문법을 사용하여 그 안에서 함수로 리턴값을 문자열로 해보았는데,, 웹에서 렌더링이 되지 않는 걸 볼 수 있었다. 그렇지만 test라는 class div태그는 있었다.

function ComponentName(){
	return(
    	<div className="test">{()=>{return 'Hello world'}}</div>
    )
}

그래서 아래와 같이 렌더링을 하는 문법은 작동 도지 않는 다는 것을 알 수 있었다.

<div>{()=>{
	for(let i = 1; i <= 5; i++){
    	return <div>{i}</div>
    }
}}</div>

근데 다음과 같은 코드는 작성 된다.

    function forFourMultiplyFour(_pictures) {

        if (_pictures.length === 0) {
            return '';
        }

        return <div
            style={{ display: 'flex', justifyContent: 'center' }}>{_pictures.map((el) => {
                return <div style={{ margin: '5px' }}>
                    <Img key={el.id} src={el.src} alt="picture"></Img>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>{el.title}</div>
                        <div>생성일자</div>
                    </div>
                </div>;
            })}</div>;
    }

결국 StackOverFlow에서 답변을 받았다. 반복문을 사용할때는 key가 필요한 것 같다.

https://stackoverflow.com/questions/70330427/why-this-function-doesnt-rendering-in-react