개발자연습노트

리액트에서 동적인 UI 만드는 step 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다.  1. html css로 미리 UI 디자인을 다 해놓고2. UI의 현재 상태를 state로 저장해두고3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성이렇게 코드짜면 완성입니다.  그래서 글제목 누르면 전에 만들었던 이게 뿅 등장하는모달창 기능을 만들어봅시다.    step 1. html css로 미리 디자인해놓기  step 2. UI의 현재 상태를 state로 저장 state 하나 만들고거기에 현재 UI의 상태정보를 저장해두라는 소리입니다.  let [modal, setModal] = useState(false);저는 modal이라고 작명..

오늘은 모달창처럼 뜨는 상세페이지를 한번 만들어보면서Component 문법을 알아봅시다.    상세페이지 겸 모달창 UI를 하나 만들어봅시다 일단 html css 레이아웃 디자인부터 해봅시다.설명하다  제목 날짜 상세내용설명하다 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left;}당연히 css 코드는 css 파일에 넣어야합니다. 모달창 겸 상세페이지 완성 끝     설명하다 return( )근데 html 코드짤 때 유의점이 있는데 return ( ) 안에 두개의 html 태그 나란히 적기 이런거 안됩니다. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다.   설명하다..

일단 글수정 버튼 만들기  설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 )}대충 아무데나 버튼하나 만들고 이거 누르면 첫 글이 수정되는 기능을 만들어봅시다.저기 물음표안에 뭘 넣어야하죠?      설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { 글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) } }> 수정버튼 )}이러면 숙제 끝입니다. 버튼누..