props에 대해서 배웠는데
props는 html에서 class속성을 부여해서 같은 속성을 부여해주는 것과 비슷하고, js에서 함수를 만들고 여러번 호출하는 것이랑 비슷한 느낌이다.
props는 내가 같은 양식을 여러번 만들때 하나를 만들어두고 그 안의 내용만 바꿔가면서 계속 쓸 수 있게 도와주는 react의 도구다.
버튼을 두개를 만들어 볼 건데 하나는 prop을 사용하지 않고 하나는 prop을 이용해서 만들어 보겠다.
다음과 같이 비슷하지만 다른 버튼을 만들었다.
두개의 버튼을 만들기 위해서 쓴 코드는 다음과 같다.
버튼1, 버튼2를 만드는 함수를 각각 만들고 속성을 일일히 변경해주었다.
분명 공통되는 코드들이 있고 공통되는 속성을 보수하려면 하나하나 찾아서 바꿔줘야 한다는 문제점이 있다.
다음을 prop을 이용해서 버튼 두개를 다시 한 번 만들어 보겠다.
같은 모양의 버튼 두개다... 사실은... 그냥 만들어 두었던 버튼을 두번 불러왔다.
그치만 이게 prop의 거의 전부이다... ㅋㅋㅋㅋㅋ
prop은 속성을 따로 부여해주는 작업인데 몇가지 코드를 수정해서 분명히 같은 버튼을 두 번 불러온거지만 다른 버튼을 만들어 보겠다..
다음과 같이 수정했는데 버튼 옆에 prop인자를 받았다.
그 인자이름은 Seongsu라고 썼다... Seongsu라고 쓴 이유는 그냥 정해진 양식이 있는게 아니라 아무거나 쓸 수 있다고 강조하기 위해서 그렇게 썼다... 실제로 작업할 때는 알아보기 쉬운 걸로 바꿔야 한다..
버튼 사이에 들어갈 말을 {Seongsu}로 놓고 밑에 버튼들을 불러올 때 Seongsu의 값을 Prop1와 Prop2로 각각 바꿔주었다.
짠 비슷하지만 다른 두개의 버튼이 완성되었다..훨씬 간단한 방법으로...
이 Props의 속성을 이용하면 여러가지 작업들이 가능하다.. 각각 다른 동작을 수행하는 함수를 지정한다거나 글씨 크기를 다르게 설정한다거나..
useState를 활용해서 버튼을 누르면 바뀌는 함수를 만들어서 prop인자로 부여해 보겠다.
같은 방식으로 버튼의 prop인자로 Event를 추가했다.
함수를 두개 만들어서 각각의 버튼에 부여할 건데, useState로 Click이벤트로 텍스트가 바뀌는 기능을 만들었다.
Seongsu의 값은 useState의{value1}을 부여했고 Setvalue로 동작이 실행되면 value가 "Function1"으로 바뀌도록 설계했다.
밑에 버튼을 호출하는 곳에서 Event프롭을 각각의 이벤트함수를 부여하고 위의 버튼을 정의하는 곳에선 onClick이벤트에 Event프롭을 부여했다.
첫 번째 버튼을 눌렀을 때 모습
두 번째 버튼도 눌렀을 때 모습
정상적으로 잘 작동한다
