React38 [React] 동적인 UI 만들기 (모달창) 동적인 UI 만드는 순서 html css로 미리 UI 디자인을 다 해놓고 UI의 현재 상태를 state로 저장해두고 state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 function Modal(){ return ( 제목 날짜 상세내용 ); } -> 1. 모달창 디자인 let [modal, setModal] = useState(false); -> 2. UI(모달창)의 현재 상태를 state로 저장 {modal == true ? : null} -> 3. 삼항연산자를 통해 modal 변수가 true 값일때만 띄우고 아닐 때는 null을 준다. setModal(!modal)}> {title[0]} setGood(good+1)}>👍{good} 2월 17일 발행 -> 태그 클릭 시 !modal 값을 넣어.. 2023. 12. 14. [React] Component 문법 Component란? -> React는 긴 HTML 태그들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. -> 모든 UI 요소를 컴포넌트(Component)로 구성합니다. 컴포넌트는 재사용 가능하고 독립적으로 동작하는 UI 요소를 나타냅니다. 여러 컴포넌트를 결합하여 복잡한 UI를 만들 수 있습니다. (ChatGPT) 예시 function App (){ return ( (생략) ) } function Modal(){ return ( ) } # 또는 const Modal = () => { return ( ) } -> 만드는 법 : function을 이용해 함수를 하나 만들어주고 그 함수의 return ()안에 축약을 원하는 HTML을 담으면 된다. 화살표 함수 형태로 만들어도 된다. Co.. 2023. 12. 14. [React] Fragment 문법 React에서 Fragment란? -> 불필요한 부모 엘리먼트를 생성하지 않고 여러 엘리먼트를 그룹화하는 데 사용되는 기능이다. # 병렬구조로 짤 수 없다. return( ) -> 위 코드는 오류가 난다. return() 내부는 하나의 태그로 시작해서 나머지를 감싸야 한다. return( ) # 또는 return( ) -> 위 같이 작성해야 한다. 리액트에서는 태그도 허용한다. 2023. 12. 14. [React] object, array 자료형일 때, state 값 변경 하는 법 let [title, setTitle] = useState(["남자코트 추천", "강남 우동맛집", "파이썬독학"]); -> 버튼을 클릭 시, 위 state를 변경하려고 한다. 변경 하는 법) { let copy = [...title]; copy[0] = "여자코트 추천"; setTitle(copy); }}>버튼 -> array, object 자료형 데이터를 다룰때는 기존값은 보존해주는 식으로 하는게 좋은 관습이라서 복사 후 변경한다. -> [...변수명] 으로 복사(deep copy) 해야 된다. 자세한 설명은 따로 글 작성 예정 2023. 12. 13. [React] onClick 함수 사용법 {title[0]} console.log(1)}>👍{good} 2월 17일 발행 -> 위 코드에서는 화살표함수를 이용했지만, function(){}도 가능하고 따로 함수를 정의하고 {}안에 함수명을 기입해도 가능하다. -> onClick 안에는 함수만 들어갈 수 있다. 2023. 12. 12. [React] 터미널에 warning 메세지 안뜨게 하는 방법 -> error가 아닌 warning은 실행에 문제가 없지만 안보이게 하고싶다면, /* eslint-disable */ -> 파일 상단에 위 코드 작성하면 더 이상 뜨지 않는다. 2023. 12. 12. [React] React에서 레이아웃 만들 때 쓰는 JSX 문법 3가지 JSX 문법 1 : css를 주려할땐 class가 아닌 className -> css를 주려고 할 때, class가 아닌 className으로 해야 한다. -> 이유 : 저 공간은 원래 자바스크립트 코드 작성하는 공간이기 때문에 class라고 쓰면 자바스크립트 class 문법과 겹치기 때문에 className으로 해야 한다. JSX 문법 2 : 변수를 JSX 내에서 값 출력할땐 {}문법 -> href, id, className, src 등 여러가지 html 속성들에도 가능하다. -> 데이터 바인딩이라고 한다. JSX 문법 3 : className 말고도 style을 넣을때 style={}도 가능 -> style={{스타일명: 값}}으로 object 자료형으로 넣어야 한다. -> 스타일명은 카멜 케이스(C.. 2023. 12. 12. [React] React 설치와 개발 환경 세팅 하기 1. https://nodejs.org/en에서 node.js LTS 버전 설치 2. vscode(visual studio code) 에디터 설치 3. 작업용 폴더 원하는 곳에 생성 후 Shift+우클릭 여기에 PowerShell 창 열기 클릭 4. 터미널에 npx create-react-app 프로젝트명 실행 5. vscode로 해당 폴더 열고 터미널에 npm start 실행하면 완료 2023. 12. 12. 이전 1 2 3 4 다음
