함수가 없이 export 하는 경우의 프롭스 전달

[박병찬]

안녕하세요.

나름 선생님의 강의를 익히면서 다른 사람이 짠 코드를 이해하려고 하는 식으로 공부하고 있어요.

먼저 제가 이해하고 있는 내용을 간단히 요약해 볼께요.

App.js
import React, {useState} from 'react'

import Son from './son'

function App() {

let [apple, apple변경] = useState("마시써")

return(

<div><Son tomato={apple} /></div>

)}

export default App;

 

son.js
import React, {useState} from 'react'

function Son(props){

return(

<p>{props.tomato}<p/>

)}

export default Son;

 

이렇게 하면, 화면에 "마시써" 가 출력되면서 프롭스를 잘 전달한 것 같아요.

이것을 쉽게 이해하도록 설명해 주셔서 감사합니다.

 

그런데 이 방법에서는 son.js에 function Son() 이 있어서 props를 전달받을 수 있었는데요,

어떤 코드를 보니까 함수를 안쓰고 export 하는 코드가 있었어요.

 

example.js

import React from 'react'

export default () => (

<p>example</p>

)

이런 익숙하지 않은 형태의 자식 컴포넌트를 만나니까 눈앞이 깜깜해졌어요.

계획대로라면 export default Example 위 어딘가에서 함수를 만들어서 그곳의 괄호에다가 props를 넣고...

자신있게 프롭스를 전달할 수 있겠는데요,

이런 형식의 파일을 만나니까 뭘 어찌해야 할지 막막합니다.

솔직히 위의 파일이 뭘 의미하는지도 잘 모르겠습니다. 막연히 같은 뜻인데 형식만 다르다 라고 추측할 뿐이에요.

이런 형태의 자식컴포넌트에는 어떻게 프롭스를 전달해야 하는지 알려주세요.

감사합니다.

 

 

[박병찬]

제가 혹시나 해서

export default (props) => (

<p>{props.tomato}<p/>

)

이렇게 하니까 전달이 됩니다! 그래서 한가지 질문을 더 하고 싶어요.

만약에 이러한 코드에서 이미 저기에 있는 괄호를 사용한 경우가 있다면요,

가령

export default (something) => (

)

이런 경우에는 props를 넣을 괄호에 이미 다른 것이 와 있는데

이런 경우에는 어떻게 프롭스 전달을 해야 할까요?

[codingapple]

export default (props) => (

  어쩌구

)

 

export default function (props) {

  return ( 어쩌구 )

}

둘다 똑같은 함수만들기 문법입니다 자바스크립트 기본 함수문법일 뿐이라 특수한 리액트 문법은 아닙니다 

 

파라미터는 아무렇게나 작명하실 수 있으며 컴포넌트 함수의 첫째 파라미터는 무조건 props입니다.

something이라는 파라미터 출력해보시면 아마 props랑 똑같은 역할을 수행하고 있을 겁니다

 

[박병찬]

감사합니다.

something 인자는 제가 만든게 아니지만 여기에 기생해서 저의 프롭스 전달을 시도해봤더니 정말 되었어요.

일단 자식 컴포넌트로 부모에 들어갔다면, 자식 컴포넌트가 위치한 곳에서 이름만 지어주면,

something.내가지은이름

이런 방법으로 기존에 존재하는 인자에 기생해서 사용할 수가 있는 것이었다는 것을 알았습니다.

 그러면, 이런 경우에는 어떻게 기생해야 하는지 알고싶어요.

제가 어떤 코드를 봤는데

                         어떤 부모의 자식 컴포넌트.js

export default ( { width, height } ) => {

return (

<p><손자컴포넌트 /><p>

)

}

이렇게 되어있는 경우에요, 

제가 부모의 컴포넌트에 있는 프롭스(이름:토마토)를 이곳 자식 컴포넌트에 전달하는데 성공했습니다.

그런데 이제 그 프롭스를 손자컴포넌트에 그대로 토스하려고 하는데

export default ( { width, height } )

이 부분에서 어떻게 해야 할지 모르겠습니다.

첫번째 쓰는 인자가 프롭스라고 하셔서, 이 코드의 기능을 살리면서 프롭스전달을 하려고

export default (프롭스전달할인자, {width, height} ) 라고 끼워넣어서 시도해봤더니 이것은 에러가 나요.

어떤 방법을 사용해야 프롭스 전달을 할 수 있을까요?

[codingapple]

width와 height는 어디있던 변수인가요

[박병찬]

혼란을 드려 죄송합니다. 위의 질문은 잘못되었어요.

다시 질문 부분에서 나온 부분을 깔끔하게 정리할께요. 제가 헷갈렸었네요.

 

 

                                 어떤 부모의 자식 컴포넌트.js

export default (container) => {

const {

size: {

width, height } }

}

이런부분이 이미 있었습니다. 그래서 제가 프롭스를 전달받기 위해서 다음과 같이 이곳에 기생을 했어요.

export default(container) => {

const {

size: {

width, height } }

const 전달받음 = container.부모에서전달           //기생한 부분

return (

<><손자컴포넌트 손자에게전달={전달받음} /></>

) }

 

                                    손자컴포넌트.js

import React from 'react'

//임포트와 익스포트 사이에 아무런 코드가 없어요

export default ({width, height}) => {

return (

<>

<rect x="0" y="0" width={width} height={height} />

// {console.log(자리할곳을못찾은인자.손자에게전달)}

// <text className={자리할곳을못찾은인자.손자에게전달} />

</>

) }

즉, 제가 보여드린 것은 손자컴포넌트였습니다. 손자컴포넌트에 인자를 넣을 곳에 {width, height}가 들어있고 그것은 자식컴포넌트에서 정의되어 있었어요.

다시한번 정리를 해보면,

부모에 있던 프롭스를 자식에게 전달하는데 성공.

자식이 받은 프롭스를 손자에게 전달 시도중.

손자가 받을 프롭스를 사용하려고보니 인자를 넣을 곳에서 방황중.

부모에게서 자식으로, 자식에게서 손자로 프롭스전달이 모두 성공하면 저는 그 프롭스값을 손자의 리턴부분에서 클래스네임으로 쓸 계획이었습니다.

'자리할곳을못찾은인자'를 어디에 넣어야 하는지 궁금합니다.

[codingapple]

자식이 손자에게 width, height 전달하는 부분이 안보이긴하는데

export default ({width, height, 손자에게전달}) 

아마 손자는 이렇게쓰면되지않을까요

[박병찬]

와! 됩니다.

두근두근 거리면서 해봤는데 실제로 되네요! 감사합니다.

코드가 실제로 예상한대로 작동하기에, 제가 이번 질문을 통해 얻게 된 내용을 정리하겠습니다.

부모에서 자식한테 갈적에 props1.부모꺼 이렇게 전달을 받았으니

다시 자식에서 손자에게 갈적에도  props2.props1.부모꺼

즉, props2.자식꺼가된거

이런 작업이 계속되다보니 실제로 손자 대에서 그냥 사용하면 끝인데 이 작업을 한번 더 하려고 한 것이었습니다.

받았으니 사용하면 되는걸;;; 이해하고 보니 참 바보같았네요.

props3.props2.props1.부모꺼 를 하려고 괄호를 찾아다녔었네요.

부모에서 어떤 이벤트를 발생시켜 이벤트에 따라서 어떤 html을 켜고 끄는 기능을 붙이기 위해서

부모에서 스테이트로 클래스네임을 각각 다르게 바꾸고 (className=켜라, 꺼라)

그것을 손자까지 물려주어서 손자에서 클래스네임으로 받아서 css에서 켜라 와 꺼라 두가지 버전을 만든 다음에

이벤트에 따라 보여주는 html을 다르게 하려고 했었습니다.

정상적으로 작동되니까 뿌듯합니다.

감사드립니다.

강의 정말 좋습니다. 계속 반복해서 시청하고 있습니다.

 

[codingapple]

이제 남들 코드짜는거 그만보고 직접 만들러가도록 합시다

[글쓴이]

글