React || Part1 블로그 제작 및 기초 문법_04

props

js 문법 중 함수 안에서 만든 변수는 함수 안에서만 사용 가능한데,

 

현재 내가 실습하고 있는 코드에선 <app> 컴포넌트(부모 컴포넌트) 안에 <Modal> 컴포넌트(자식 컴포넌트)가 있는데 부모 컴포넌트의 state를 자식 컴포넌트로 전송이 가능하다. 이럴 때 쓰는 문법이 props이다.

 

props 사용법(부모 컴포넌트에서 자식 컴포넌트로 state 전송하는 법)

 1. <자식컴포넌트 작명 = {state의 이름}>

{modal == true ? <Modal practice={practice}></Modal> : null}

 

 2. 자식 컴포넌트쪽에 props 파라미터 등록 후 props. 작명 사용

function Modal(props) {

return (

<div className="modal">

<h4>{props.practice[0]}</h4>

<p>날짜</p>

<p>상세내용</p>

</div>

);

}

practice는 배열이므로 뒤에 원하는 순서를 정해준 것이며, 배열이 아닌 경우 그냥 쓰면 되겠지?

 

부모에서 자식으로만 전송 가능하며, 그 이외의 경우는 모두 불가능

 

그럼 추가적으로 Modal창에 버튼을 하나 만들어서 practice 배열['남자 코트 추천', '강남 가락국수 맛집', '파이썬 독학']에서 버튼을 눌렀을 때 0번째 요소가 '여자 코트 추천'으로 바뀌게 하려면??

 

방금 배운대로 props를 사용하기 위해 미리 Modal 안에 <자식컴포넌트 작명 = {state의 이름}>을 해주고 

<Modal setPractice={setPractice}></Modal>

아래 함수에 파라미터 등록후 props를 사용하면 된다.

<button

onClick={() => {

props.setPractice([

"여자 코트 추천",

"강남 우동 맛집",

"파이썬 독학",

]);

}}

>

글수정

</button>

이렇게 하면 완성!

 

props 응용

 

위에 예제에서 응용하여 

i 번째 제목을 눌렀을 때 i 번째 제목이 보이게 하려면??

 

동적인 UI를 만들고 싶으면 어떻게 코드를 짜야하냐면??

 

1. html css 미리 디자인

2. 현재 UI 상태를 state에 저장

3. state에 따라 UI가 어떻게 보일지 작성

 

일단 지금 1번은 이미 완료되었으니 2번으로 넘어가 보자.

 

현재에선 0,1,2번째 상태가 있으므로 

let [title] = useState(0)

이런 식으로 state를 지정해 주었다.

 

그 후 Modal 안에

title={title}

이렇게 지정해 주었고, 

 

function Modal(props) {

return (

<div className="modal">

<h4>{props.practice[props.title]}</h4>

<p>날짜</p>

<p>상세내용</p>

<button>글수정</button>

</div>

);

}

props 문법을 이용하여 이렇게 마지막 부분 코드를 작성하였다.(title이 0이면 practiec[0], title이 1이면 practiec[1] 이런 식) 

 

마지막으로 하나 남은 게

이거다.

 

let [title, setTitle] = useState(0);

 

이후 앞에서 작성해 뒀던 코드에서 onclick시 모달창이 생기는 부분에 코드를 하나 추가해 보자.

 

{practice.map(function (a, i) {

return (

<div className="list">

<h4

onClick={() => {

setModal(true);

setTitle(i);

}}

>

{practice[i]}

<spen

onClick={() => {

let copy = [...good];

if (copy[i] === undefined) {

copy[i] = 0; // 초기값 설정

}

copy[i] = copy[i] + 1;

setGood(copy);

}}

>

👍

</spen>

{good[i]}

</h4>

<p>2월 17일 발행</p>

</div>

);

})}

여기서 setTitle에서 i를 사용할 수 있는 이유는 앞에서 말했다시피 map이라는 반복문 안에서 반복문이 돌 때마다 1씩 늘어나는 것이기 때문에 그대로 사용하면 된다.

 

이번 같은 경우에는 부모컴포넌트와 자식 컴포넌트 둘 다 사용하기 위해 부모컴포넌트에 usestate를 사용하였는데

 

굳이 그럴 필요 없이 자식요소에만 사용할 거라면 자식 요소에 usestate를 사용해도 무방하니 뭐 이건 그때그때 상황에 맞춰서 사용하면 될 거 같다.

 

props 중요한 문법인 거 같다. 며칠 지나고 나서 다시 코드를 짜보면서 익숙해져 보자.