코드스테이츠 FE 43기 도전기/실습3 React Custom Component Bare minimum Requirement Modal, Toggle, Tab, Tag 컴포넌트를 구현합니다. 1. Modal useState로 컴퍼넌트에서 상태를 관리 할 수 있습니다. const [, ] = useState(); const [isOpen, setIsOpen] = useState(false); const openModalHandler = () => { // TODO : isOpen의 상태를 변경하는 메소드를 구현합니다. setIsOpen(!isOpen); }; 삼항연산을 이용을 하여 열린상태(isOpen) 일 때 : 아닐 때 를 해주었습니다. condition ? exprIfTrue(true) : exprIfFalse(false) {/* TODO : 조건부 렌더링을 활용해서 Modal이.. 2023. 2. 21. React State & Props Tweets.js 트윗 전송 Form 테스트 유저 이름을 작성할 수 있는 input 엘리먼트가 있어야 합니다. (className : "tweetForm__input--username") 의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다. 트윗을 작성할 수 있는 textarea 엘리먼트가 있어야 합니다. (className : "tweetForm__input--message") 의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다. 트윗을 전송할 수 있는 button 엘리먼트가 있어야 합니다. (className : "tweetForm__submitButton") 의 값이 변경될 때 onClick 이벤트 핸들러가 불려야 합니다. 유저 이름과 트윗을 작성하고, 트윗 버튼을 누르.. 2023. 1. 27. React Twittler Intro Sidebar 컴포넌트 기술 요구사항 App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다. Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots") 1. App 컴포넌트의 후손컴포넌트로 Silderbar 컴포넌트가 있어야 합니다. const App = () => { return ( {/* TODO : Sidebar 컴포넌트를 작성합니다. */} ); }; 컴포넌트란? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻 합니다. 컴포넌트이므로 className 을 지정할때 첫글자를 대문자로! 해줍니다. 소문자로 시작하게 되면 일반적인 HTML엘리먼트로 인식 className? class로 작성하게 된.. 2023. 1. 20. 이전 1 다음