06. 실무형 폴더구조 와 props

폴더구조의 체계화

container / presentational 패턴이란
소스코드를 Javascript(기능)와 HTML(UI)로 나누는 방법을 의미합니다.

• Container 는 Javascript
• Presenter 는 HTML
  
  위의 내용을 두개의 파일로 나누면 이렇게 됩니다.
  
  세부 내용은 이렇게 됩니다.
  

props로 데이터 전달하기

부모 자식 컴포넌트의 관계에서 props는 밑으로 event는 위로 전달하는데
부모는 props를 통해 데이터를 전달하고 지식은 event를 통해 메시지를 전달합니다.

컴포넌트를 2개로 나누면서 데이터와 기능의 연결 고리가 끊어졌습니다.

이 때, 부모컴포넌트와 자식컴포넌트를 props로 연결할 수 있습니다.

Emotion 에 props 던지기

emotion 으로 만들어진 태그도 props를 전달할 수 있습니다.

import { useState } from 'react';
import { Test } from '../../src/test2';

export default function Test2() {
	const [isTrue, setIsTrue] = useState(false);

	const handleOnClick = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Test onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);
}

import styled from '@emotion/styled';

export const Test = styled.div`
	color: red;
`;

위의 코드는 handleOnClick를 클릴할 때 마다 isTrue의 값이 true/false로 바뀌게 됩니다.
여기에서 css에 true와 false의 각각 다른 색을 보여주게 하면 됩니다.

return (
	<>
		<Test isTrue={isTrue} onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
	</>
);

export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;