toggle Javascript 없이 FAQ 아코디언 만들기!? details 태그는 기본적으로 요약 외부의 콘텐츠를 표시하거나 숨길 수 있는 기능을 자동으로 제공합니다. Javascript를 사용하여 완전히 건너뛸 수 있는 모든 마법이 일어나는 곳입니다. 가장 먼저 해야 할 일은 브라우저의 기본 화살표 문자를 제거하여 모든 스타일을 직접 지정할 수 있도록 하는 것입니다. Tailwind에는 marker:라는 편리한 의사 요소 선택기가 있어 스타일을 지정... toggletailwindcssfaqaccordion [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps 라디오버튼 이미지로 토글 만들기 클릭했을때 활성화된 이미지 버튼으로 바뀐다 둘중에 하나만 활성화됨 onClick이벤트가 발생하면 handleClickAdmin을 실행하고 setInputStatus으로 false->true로 바꿔줌 click이 true로 바뀌면서 show가 true 또는 false로 바뀌면서 스타일컴포넌트의 조건문이 실행된다 ** onClick은 이벤트가 발생하는 해당 컴포넌트에서 적어줘야한다 input r... ReacttoggleradioReact
Javascript 없이 FAQ 아코디언 만들기!? details 태그는 기본적으로 요약 외부의 콘텐츠를 표시하거나 숨길 수 있는 기능을 자동으로 제공합니다. Javascript를 사용하여 완전히 건너뛸 수 있는 모든 마법이 일어나는 곳입니다. 가장 먼저 해야 할 일은 브라우저의 기본 화살표 문자를 제거하여 모든 스타일을 직접 지정할 수 있도록 하는 것입니다. Tailwind에는 marker:라는 편리한 의사 요소 선택기가 있어 스타일을 지정... toggletailwindcssfaqaccordion [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps 라디오버튼 이미지로 토글 만들기 클릭했을때 활성화된 이미지 버튼으로 바뀐다 둘중에 하나만 활성화됨 onClick이벤트가 발생하면 handleClickAdmin을 실행하고 setInputStatus으로 false->true로 바꿔줌 click이 true로 바뀌면서 show가 true 또는 false로 바뀌면서 스타일컴포넌트의 조건문이 실행된다 ** onClick은 이벤트가 발생하는 해당 컴포넌트에서 적어줘야한다 input r... ReacttoggleradioReact