Props / State - 3

인풋창 만들기

InputBox

 

Input 폴더 생성후 index.tsx 생성

 

index.tsx

import React from "react";
import Styled from "styled-components";

interface Props {
    readonly placeholder?: string;
    readonly onChange?: (text: string) => void;
}

const InputBox = Styled.input`
  flex: 1;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid #BDBDBD;
  outline: none;
`;

export const Input = ({placeholder, onChange} : Props) => {
    return (
        <InputBox placeholder={placeholder}
        onChange={(event => {
            if(typeof onChange === 'function'){
                onChange(event.target.value);
            }
        })}
        />
    );
}

 

App.tsx 수정

import {Button,Input} from "Components";

...

const InputContainer = Styled.div`
    display : flex;
`;

function App() {
    return (
        <Container>
            <InputContainer>
                <Contents>
                    <Input onChange={(text => console.log(text))}/>
                    <Button label="추가" onClick={()=> alert('추가얼럿')}/>
                </Contents>
            </InputContainer>
        </Container>
    );
}

export default App;

 

Components/index.tsx 내용추가

export * from './Input';

---

아이템창 만들기

ToDoItem

 

index.tsx

import React from "react";
import Styled from "styled-components";
import {Button} from "Components/Button";

interface Props {
    readonly label: string;
    readonly onDelete?:() => void;
}

const Container = Styled.div`
    display: flex;
    border-bottom: 1px solid #BDBDBD;
    align-items: center;
    margin: 10px;
    padding: 10px;
`;

const Label = Styled.div`
    flex: 1;
    font-size: 16px;
    margin-right: 20px;
`;

export const ToDoItem = ({label, onDelete} : Props) => {
    return (
        <Container>
            <Label>{label}</Label>
            <Button label="삭제"
                    backgroundColor="#FF1744"
                    hoverColor="#F01440"
                    onClick={onDelete}/>
        </Container>
    )
}

 

App.tsx 수정

import {Button,Input,ToDoItem} from "Components";

...

function App() {
    return (
        <Container>
            <Contents>
                <ToDoItem label="삭제" onDelete={()=>alert('삭제')}/>
                <InputContainer>
                        <Input onChange={(text => console.log(text))}/>
                        <Button label="추가" onClick={()=> alert('추가')}/>
                </InputContainer>
            </Contents>
        </Container>
    );
}

export default App;

 

Components/index.tsx 내용추가

export * from './ToDoItem';

 

결과