오식랜드

블로그 프로젝트에서 상세페이지를 만들어보자 완전히 다른 페이지 말고 모달 형식으로 고고~ 모달창을 먼저 생성해보자 리스트 하단에 div를 만들고 App.css에서 스타일을 적용해주자 return ( . . . 제목 날짜 상세내용 ); 그리고 만들 모달 div를 컴포넌트로 뺴보자 컴포넌트 없이 쭈우욱 아래로 입력된 코드보다 컴포넌트를 분리해 정리된 코드가 남이 볼때나 미래의 내가 볼 때 보기 쉽고 코드 수정도 좋을 것이다. 컴포넌트를 만드는 법 1. function 생성 : function App(){} 바깥에 생성 + 함수명 첫 글자는 영어 대문자 2. return() 안에 html코드 담기 : 이전과 같이 하나의 div로 감싸져 있어야 함 3. 으로 불러오기 function Modal(){ return..

이전에 하나의 내용만을 담고있는 state를 변경하는 방법을 배웠었다. state 설정 함수에 인자로 넘겨주면 아예 갈아끼워지는 방식이었다! 그런데 배열 안에 있는 내용 중 한가지만 변경하고 싶은데, 어떻게 해야할까!? 아주 쉬운 방법으로는 이전 state를 그대로 복붙해서, 원하는 부분만 변경해주면 된다. let [listTitle, listTitleSet] = useState(['코트 추천', '가디건 추천', '패딩 추천']); . . . {listTitle[0]} 👍 {like} {listTitleSet(['여자 코트 추천', '가디건 추천', '패딩 추천'])}}>글자 변경 2022-10-02 하지만 지금은 임시로 3개만 넣어놔서 괜찮지만, 데이터가 100개 넘어가고 그러면 아주 비효율적인 방법..

하나의 state에 여러 내용을 담는 법은 아래와 같다 let [listTitle, listTitleSet] = useState(['코트 추천', '가디건 추천', '패딩 추천']); 그리고 사용할 때에는 배열에서 뽑아 쓰듯 쓰면 된당 {listTitle[0]} E-Z 이제 위의 state를 사용해서 목록을 만들고, 그 옆에 '좋아요'버튼과 좋아요 수가 나오도록 코드를 작성해주자 button태그 말고 span태그를 사용하고, 글자 말고 이모티콘으로 귀엽게 만들어도 된당 {listTitle[0]} 👍 0 2022-10-02 그런데 좋아요 갯수도 앞으로 계속 유동적으로 바뀔 숫자이니 state로 만들어두면 좋을 것 같다! 설정하는 함수를 아직 사용하지 않을때에는 변수에 하나만 입력해도 된당 let [like..

리액트 프로젝트를 진행하다보면 터미널에 error 또는 warning 메세지가 뜬다 여기서 error는 중요한 내용이라 짚고 넘어가야하지만 warning은 그저 a라는 변수가 사용되지 않고 있어요~ 와 같은 메세지라서 그 말을 따라 코드를 수정해줘도 되지만 신경쓰기 싫고 아예 안떳으면 좋겠는 분들은 /*eslint-disable*/ 라는 주석을 파일 최상단에 넣어주면 된다.

state 문법을 언제 어디서 사용해야할까?? 1. 변수가 변경될 가능성이 있을 때 2. 변수가 변경될 시 자동으로 html에 반영되게 하고 싶을 때 3. 자주 변경될거같은 html 부분 let store 라는 변수가 있다. 이 변수가 처음에는 '강남 백화점'이었다가 후에 '홍대 백화점'으로 변경되었을 때, html에는 바로 반영이 안된다. 따로 코드를 손봐줘야하는 번거로움이 있다. 하지만 state의 경우에는 담은 내용이 변경되었을 때, html이 자동 재렌더링 되어 따로 손봐줄 필요가 없다. 텍스트 요소 뿐만 아니라 className과 같은 요소에도 사용할 수 있다. ---------------------------------------------------------------------------..

이제 코드를 작성해보자! 처음 app.js를 열면 className = App인 div 안에 뭐가 막 있는데 일단 다 지우고 div하나만 남기고 시작하자 저장하면 이제 흰 화면만 나온다. 그상태로 시작하면 된다! 이전에 사용하던 html과 똑같이 작업하면 되는데,,, 어떻게 js파일인데 어떻게 html이 먹히지?! 싶은데, 사실 우리가 작성할건 html이 아니라 jsx이다 (js에서 html대신 사용할 대용품) 이전에는 js파일 안에서 div를 새로 만들려면 react.createElement('div', null, 'hi hi')와 같이 작성했어야 했다. 하지만 넘 길기도 하고 복잡해보여서 굉장히 사용하기 꺼려졌다... 지금은 jsx를 개발하신 분 덕분에 사용해서 이전 html처럼 간단히 만들 수 있게..