[ 폴더구조 체계화 ]

container / presenter

container /presentational 패턴
소스코드를 js(기능)와 html(정확히는 jsx로, ui)로 나누는 방법을 의미한다
❗️ 내용만 똑! 떼오면 내부 함수, 변수들이 연결이 되어있지 않아 오류발생

props

container가 2개의 컴포넌트로 분리되었는데, 부모 컴포넌트에서 자식컴포넌트로 변수/함수를 전달해준다
쉽게 생각해서 container -> (props) -> presenter

✏️ 단방향 구조
리액트는 부모 -> 자식 방향으로만 데이터를 전달하기 때문에 단방향 구조라고 한다
✏️ 앵귤러에서는 양방향 구조 가능

queries / styles

gql불러오기
emotion 불러오기

Eomotion에 props 던지기

// presenter
return (
 <>
  <Test isTrue={isTrue} onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
 </>
);
// Emotion
export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;

Emotion에서 props를 받아 삼항연산자로 조건을 걸어줬다
isTrue가 true면 "red", false면 "blue"
${ ( props ) => ( props. isTrue ? "red" : "blue" ) }

onClick 뿐만 아니라 onMouseOver / onMouseLeave 등 태그에는 on으로 시작되는 속성이 많기때문에 활용법이 무궁무진하다

true / false 뿐만 아니라 String, Number 타입도 모두 전달할 수 있기때문에, 특정 상황에서 CSS 변경은 emotion-props를 잘 이용하면 된다.