리액트 시작하기2

Component

component 들어가기 앞서

return 안에는 2개의 html 태그를 나란히 적을 수 없다. 하나의

로 감싸거나 <></>로 감싸자

function App(){
    return(
        <>
            <div></div>
            <div></div>
        </>
    )
}

Component 만들기

긴 HTML은 함수화 할 수 있다.

function App(){
  return(
      <> <Comp /> </>
  )
}

function Comp(){
    return(
        ...
    )
}

component를 만들 때 유의할 점

• component안에 component를 만들지 않는다. (App도 하나의 컴포넌트)
• 로 사용해도 되고 로 사용해도 됨
• arrow function 사용 가능
• function Comp(){ return (...) } let Comp = () => { return (...) }

Component는 언제 쓸까

• 사이트에 반복해서 출현하는 HTML은 컴포넌트화 해서 만들자
• 내용이 자주 변경될 것 같으면 만들자
• 다른 페이지를 만들고 싶다면
• 단, 너무 많은 컴포넌트는 관리가 힘들다(props라는 문법을 이용해야만 변수 활용가능) 꼭 필요할 때만 컴포넌트 만들자.

Component를 state에 따라...

리액트에서 동적인 UI 만드는 step

1. html css로 UI 디자인을 한다.
2. UI의 현재 상태를 state로 저장해둔다.

    let[modal, setModal] = useState(false);

3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성한다.

    function App(){
       let [modal, setModal] = useState(false);
       return( 
           <div className="app"> 
               ... 
               <!--조건문에 따라 UI를 보여준다. :: modal이 true일 때 보여주고 false일 때 닫음 -->
               <button onClick={()=>{ setModal(!modal) }}>TITLE</button> 
               { modal? <Modal /> : null } 
               ... 
           </div>
       ) 
   }

map 함수 사용법 등 javascript ES6와 관련된 내용은 여기서 참고한다.

props

자식 component가 부모 component의 state를 쓰고 싶으면 props로 전송해야 한다.

function App (){
  let [title, setTitle] = useState(['title1', 'title2', 'title3']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ title[0] }</h4>
      <p>contents blah blah</p>
    </div>
  )
}

위와 같이 작성할 경우 Modal()안에 있는 title이 define되지 않았다는 에러가 발생한다. title 변수는 App에서 정의되었지만, Modal에는 없기 때문이다.

props로 부모 -> 자식 state 전송하는 법

1. 자식 component 사용하는 곳에 가서 <자식컴포넌트 어쩌고={state명} />
2. 자식 component 만드는 function으로 가서 props라는 파라미터 등록 후 props.어쩌고를 사용한다.

function App (){
  let [title, setTitle] = useState(['title1', 'title2', 'title3']);
  return (
    <div>
      <!-- 1. 자식component 사용하는 곳에 가서 설정 -->
      <Modal title={title}></Modal>
    </div>
  )
}
//2-1. 자식 component만드는 function에서 props 파라미터 등록
function Modal(props){
  return (
    <div className="modal">
      <!-- 2-2. props.title을 사용 -->
      <h4>{ props.title[0] }</h4>
      <p>contents blah blah</p>
    </div>
  )
}

state는 부모 -> 자식 전송만 가능해, 컴포넌트들 중 최고로 높은 부모에게 만들어놔야 한다.

'WEB > React' 카테고리의 다른 글

리액트 시작하기4 - 리액트 기초  (0)	2022.05.04
리액트 시작하기3 - 리액트 기초  (0)	2022.05.04
리액트 시작하기1  (0)	2022.04.29