-
컴포넌트 생성, 사용하기프레임워크/리액트 React 2023. 1. 16. 18:23반응형
컴포넌트
html은 <div> 사용이 많아지기 때문에 코드가 더러워지는 단점이 있다.
리액트에서는 이 부분을 해결하기 위해 컴포넌트를 만들어 사용한다.
뿐만 아니라 해당 컴포넌트를 보면, 어떤 기능을 하는지 명확히 알 수 있는 장점도 있다.
→ 가독성이 좋아지고, 코드의 재활용에 좋다.
1. 컴포넌트(component) 생성
- function을 만들고,
- return() 안에 html 담기
- <함수명></함수명> 쓰기 또는 <함수명/>
1) 주의사항
- 다른 function 바깥쪽에 작성할 것
- function 이름은 영문 대문자로 시작 (ex: Modal)
- return() 안에는 하나의 태그로 시작해 하나의 태그로 끝나야 함
→ 여러개의 태그를 사용하고 싶을 때는 가장 바깥쪽에 <></>로 감싸준다(fragment 문법)
→ 참고사이트 : https://ko.reactjs.org/docs/fragments.html
//App도 컴포넌트이다. function App() { return ( <Modal></Modal> ) } function Modal() { return ( <> <div className='modal'> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> <div></div> <> ) }
2) 컴포넌트는 어디에 쓰면 좋은가
- 반복적인 html 축약할 때
- 큰 페이지들 (페이지 하나를 컴포넌트로 만들어 전환할 때 사용)
- 자주 변경되는 것들
* 컴포넌트의 단점
컴포넌트는 함수이기 때문에 state를 가져다 쓸 때 문제가 생긴다.
→ 따라서 너무 코드가 너무 더럽거나, 자주 쓰는 것들을 만드려고 해라
⭐동적 UI 만들기
- html, css로 미리 디자인 완성
- UI 현재 상태를 state로 저장
- state에 따라 UI가 어떻게 보일지 작성
let [modal, setModal] = useState(상태표현); //상태 표현의 형식은 자유 //0과 1, false와 true로 작성해도 괜찮다. let [modal, setModal] = useState('닫힘');
1) 주의사항
- JSX 문법 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기
- JSX 내에서 조건문 사용하고 싶을 때는 삼항 연산자를 사용한다.
function App() { let [modal, setModal] = useState(false); return ( <div className="App"> { modal == true ? <Modal/> : null } </div> ); } //modal 컴포넌트 function Modal() { return ( <div className='modal'> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) }
2) 버튼을 누르면 모달창이 나오게 만들기
function App() { let [modal, setModal] = useState(false); return ( <div className="App"> <button onClick={ ()=> { modal == false ? setModal(true) : setModal(false) }}>모달버튼</button> { modal == true ? <Modal/> : null } </div> ); } //modal 컴포넌트 function Modal() { return ( <div className='modal'> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) }
→ 리액트에서는 버튼 누르는 동작을 할 때 모달창의 스위치인 state만 건드린다.
반면, 자바스크립트에서는 버튼을 누르면 모달창의 html을 직접 건드린다는 점에서 다르다.
//이렇게 작성할 수도 있다. //modal의 현재 상태의 반대로 바꾼다는 의미이므로! <button onClick={ ()=> { setModal(!modal) }}>모달버튼</button>
'프레임워크 > 리액트 React' 카테고리의 다른 글
ERROR 1045(28000) 비밀번호 오류 (0) 2024.07.09 state 개별 숫자 증가, props (0) 2023.01.19 map() (0) 2023.01.17 리액트 기본문법 JSX, state (0) 2023.01.14 리액트 설치 및 세팅 (0) 2023.01.14