목록dev-log/react (9)
H-Log
1. html을 담은 retun 안에는 하나의 태그로 묶여야 한다. return( ~~~ ) 보통 태그를 감쌀 땐 div를 쓴다. 그런데 두개를 나란히 두고 싶다면? 하나의 의미 없는 div안에 두개를 넣으면 되는데, 의미 없는 div 대신 빈 태그로 감쌀 수 있다. return( ) 2. 컴포넌트를 생성하는 문법 function Modal(){ return( 제목 날짜 상세내용 ) } 기본적으로 알고있는 함수 문법이다. 그런데 이 방법 말고, 변수를 선언하고 그 안에 화살표함수를 담아 사용하기도 가능하다 const Modal = () => { return( 제목 날짜 상세내용 ) } const로 선언한 이유는 코드 작성 중에 Modal = 123 등으로 재선언을 하면 에러 메세지를 출력해준다. 그러면 ..
블로그 프로젝트에서 상세페이지를 만들어보자 완전히 다른 페이지 말고 모달 형식으로 고고~ 모달창을 먼저 생성해보자 리스트 하단에 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과 같은 요소에도 사용할 수 있다. ---------------------------------------------------------------------------..