Day 06.
[ 폴더구조 체계화 ]
container / presenter
container /presentational 패턴
소스코드를 js(기능)와 html(정확히는 jsx로, ui)로 나누는 방법을 의미한다
❗️ 내용만 똑! 떼오면 내부 함수, 변수들이 연결이 되어있지 않아 오류발생
props
container가 2개의 컴포넌트로 분리되었는데, 부모 컴포넌트에서 자식컴포넌트로 변수/함수를 전달해준다
쉽게 생각해서 container -> (props) -> presenter
container /presentational 패턴
소스코드를 js(기능)와 html(정확히는 jsx로, ui)로 나누는 방법을 의미한다
❗️ 내용만 똑! 떼오면 내부 함수, 변수들이 연결이 되어있지 않아 오류발생
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를 잘 이용하면 된다.
Author And Source
이 문제에 관하여(Day 06.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wisdoom03/22.01.17-Day-06저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)