props, el , prev의 진실

props 의 경우

함수 실행
getProfile(여기 들어오는게 인자)

--
함수 선언
function getProfile(인자를 받아오는 매개변수){
console.log('asd')
}

props는 함수선언시 ()에 쓰임. 따라서 매개변수.
따라서 꼭 props라는 이름이 아니여도 받아올 수 있음.

getprofile({count:123})으로 객체가 들어가게되면,

function getProfile(aaa){
console.log(aaa.count)
}

여기 함수의 매개변수 aaa에 저 인자가 들어오개되어
console.log(aaa.count) ==> 하면 count의 값을 가져올 수 있게 된다.

Container컴포넌트

return <Presenter count={123}/>

Presenter컴포넌트

export default function Presenter(props){
		return<div>{props.count}<div/>

props부분은 매개 변수 이므로 저부분을 aaa로 해서 받아와도 문제없이 작동된다.

주의

클래스컴포넌트 즉, 클래스 함수로 컴포넌트를 만드는 경우에는 props등의 이름을 바꾸어서는 안된다.
이미 extends Component 로 Component에서 상속 받아와 그 안에 내장되어있는 것이기에 매개변수가 아니기 때문이다.
props 의 경우에는 this.props 로 사용한다.

함수형의 경우에만 그냥함수의 매개변수 이기에 꼭 props일 필요가 없는것이다.

el의 경우

getprofile("훈이",12)
const profile = (aaa,bbb) => (
console.log(${aaa}는 ${bbb}살 입니다)
)

여기서 aaa와 bbb는 매개변수라고 했다.

그렇다면 map에서 el과 index는 ?

["철수","유리","훈이"].map((el,index)=>(
console.log(${el}은 ${index}입니다)
))

각각의 요소가 el 의 자리에 들어오게되고 두번째부분의 index라는 곳에는 각각의 인덱스 번호가 들어오게된다.

이 map부분을 함수로 바꿔본다면

function map (qqq) {
qqq("철수",0)
qqq("유리",1) ===>각 요소들을 한번씩 받아와 실행
qqq("훈이",2)
}

qqq가 매개변수로 map이라는 함수에 들어오고, 그 매개변수에 인자들을 넣어주는 형태이다. 그렇게해서 map과 같은 그림을 그릴 수 있다.
따라서 el, index또한 매개변수이다. 둘의 자리를 바꾼다하더라도, 또는 다른 이름으로 넣어준다고 하더라도 나오는 리턴값은 바뀌지 않는다.

prev의 경우

state를 저장소에서꺼내올 때 prev를 사용했다.

그런데 setState를 한번 살펴보자
setState()==> 이렇게 소괄호를 사용해 실행시키고 있는 이 아이는 함수이다.
따라서 함수안에 그러니까 저 소괄호 안에 적는 것은 인자가되고 그 안에 화살표 함수로 prev를 적어주면 걔는 화살표함수의 매개변수가된다.

setCount((prev)=>prev+1)
===> prev는 매개변수기에 어떤 이름으로 사용해도 무방하고, 저 화살표 함수를 함수선언식으로 바꾸어 보면 이런모양이된다.
function setCount(qqq){
		qqq()
      }  

정리:

결국 props, el, prev모두 매개변수에 불과한 아이들이였다. 사실 어떤 이름으로 받아와도 무관하나, 관례에 따른 사용이기에 기존이름 그대로 사용하도록하자.