💻/Front-end (3) 썸네일형 리스트형 Simple Diary - (1) 중복 제거 (state, onChange 합치기) 동작이 비슷한 state 하나로 묶기 before const [author, setAuthor] = useState(""); const [content, setContent] = useState(""); return ( 오늘의 일기장 { setAuthor(event.target.value); }} > { setContent(event.target.value); }} > ); after - 객체로 만들어 새로운 객체를 setState로 전달 const [state, setState] = useState({ author: "", content: "", }); return ( 오늘의 일기장 { setState({ author: event.target.value, content: state.content, }).. React - State와 Props React란? : 사용자 정의 태그 (html 태그와 다르게 반드시 대문자로 시작) === Component props: 우리가 만든 component에 html 태그들처럼 속성을 갖게 하는 것 사용자 태그에 정의한 속성들을 모두 사용자 컴포넌트의 첫번째 인자로 object를 넘겨줌. (첫번째이자 유일한 인자, props) >> 재사용성 state 리액트를 유동적으로 다루기 위해 존재하는 객체 useState() 라는 리액트 함수를 사용하여 State라는 저장공간에 담아 사용 setValue는 값을 바꿀 때 사용. 이를 호출하면 value가 변경된 값으로 setting되어 App 컴포넌트가 reRender. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있지만 props(외부자를 위한)는 (함수.. CSS - display: flex 부모 요소인 Flex Container와 자식 요소인 Flex Item Flxe 기능의 영향을 받는 전체 공간은 부모 요소인 Container 설정된 Flex 속성에 따라 Container 속 자식 요소인 Item들이 여러 형태로 배치 * 배치 방향 속성 _ flex-direction .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } * 정렬 속성 메인축 방향 설정 justify-content .container { justify-content: center; /* justify-content: flex-st.. 이전 1 다음
