728x90

Frontend/React 21

(12) React - styled-components / props

# styled-components 설치 => npm i styled-components # styled-components를 사용하는 이유 위 아래를 비교해보면 styled-components를 사용했을때 코드가 깔끔하고 한눈에 들어온다. 방법은 styled를 import하고 그 뒤에 점을 찍어서 유효한 html 태그를 사용하면 된다. 그리고 백틱( ` ` ) 내부에는 css에 관한 내용을 적는다. import styled from "styled-components"; function App(){ return( ); } export default App; import styled from "styled-components"; const Father = styled.div` display: flex; `..

Frontend/React 2023.01.11

(7) React - ToDo list 만들기

# frame input에 내용을 입력하면 list에 추가되는 형식으로 만들것. list 옆에 삭제 버튼도 구현할것이다. # 순서 input에 입력할 todo와 입력된 todo에 관한 state를 만든다. state는 string으로 처음에 빈문자열로 받을것이다. 그리고 return문에 div와 input을 만든다. 이 input의 type은 text이고 placeholder도 만들어준다. 그리고 list를 추가할 button도 하나 만들어준다. input의 value는 todo로 받을 것이고 , onchange이벤트를 하나 만들어서 input의 입력값이 변하면 받을 함수를 만든다. onchange함수는 event가 발생하면 setTodo함수가 실행된다. 이 setTodo함수는 input에 입력받은 값이..

Frontend/React 2023.01.04
728x90