[React] State, Props, map에 대한 개념

 

 

map()

• 1. JSX 문법 내부에서 반복문을 사용하기 위해서는 for문을 사용할 수 없다.
• 2. 함수화하여 사용할 수 있는 map 함수를 사용할 수 있다

 

const [title. setTitle] = useState(['강아지', '고양이', '호랑이'])
...
{
	title.map(function (val, i){
    	// 해당형태로 사용
        <h4>{val}</h4>
        // 강아지, 고양이, 호랑이
        <p>{i}</p>
        // 0, 1, 2
    })
}

 

• 3. map 앞쪽 title을 넣은 이유는 3번 배열의 3개의 인덱스가 들어가있어 3번 반복하기 위함
• 4. [1, 2, 3].map 으로 사용해도 무방하다
• 5. val는 title의 내용을 하나씩 꺼내 쓴다.
• 6. i는 반복할때마다 1이 증가하는 카운트 형식을 취한다.

 

props

 

• 1. 부모 혹은 상위의 함수에 호출 당하는 하위(자식) 함수에서 사용하기 위함이다.
• 2. title의 경우 자식 컴포넌트에서도 사용을 해야하는데 새롭게 만들고 새롭게 변경하는 함수를 매번 만들 수 없기에 사용
• 3. 부모 컴포넌트에서 자식 컴포넌트를 호출하는 부분과 자식 컴포넌트에서 사용

function root() {
	....
	<div>
		{
			< title={title} Modal />
		}
	</div>
}

funtion child(props) {
return() {
		<div>hello {props.title} </div>
	}
}

• 4. 해당 코드의 내용 처럼 자식의 파라미터로 props를 넘겨받고 props.title이라는 형식으로 사용한다.
• 5. 단, 해당 형식은 부모에서 자식에게만 가능하며 자식 -> 부모, 동일 레벨 컴포넌트 끼리의 교류는 불가하다