[React 기초] Component : 복잡한 html을 한 단어로 축약하고 싶다면 / 동적인 UI 만들기(모달창)
by 히컵2024. 8. 2.
들어가기 전에
html 코드를 짤 때 유의해야할 점이 있다.
return() 안에는 병렬로 태그 2 개 이상 기입 금지. 하나의 태그로 시작해서 하나의 태그로 끝내야 한다.
그래서 <div> 두 개를 나란히 적고 싶으면 아래 같이 하나의 div로 또 감싸거나 해야 한다.
이렇게 의미 없는(필요 없는) <div>를 사용하기 싫으면 <></>로 감싸도 된다.
이걸 fragment문법이라고 한다.
복잡한 html을 한 단어로 한 단어로 치환할 수 있는 Component 문법
리액트에는 복작한 html, 많은 div들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데, 이것을 Component라고 한다. Component 문법을 이용하면 함수나 변수를 만드는 것처럼 html을 한 단어로 치환해서 원하는 곳에 넣을 수 있다. 이러면 코드도 깔끔해지고 알아보기도 쉬워진다.
Component 문법 사용하는 법
1. function을 이용해서 함수를 만들어서 작명을 한다.
2. 그 함수의 return()안에 축약할 html을 작성한다.
3. 원하는 곳에 <함수명></함수명> 사용한다.
이렇게 축약한 html 덩어리를 Component라고 부른다.
html을 깔끔하게 축약해서 쓰고 싶으면 Component를 사용하면 된다.
어떤 Html 덩어리를 Component로 만들면 좋을까?
기준은 없지만 관습적으로
1. 사이트에 반복적으로 출현하는 html 덩어리
2. 내용이 자주 변경될 것 같은 html 부분
3. 다른 페이지를 만들고 싶을 때 그 페이지의 html 내용을 하나의 component로
4. 다른 팀원과 협업시 웹 페이지를 Component 단위로 나눠서 작업 분배
컴포넌트는 함수 문법과 똑같아서 용도도 같다.
(함수 문법은 1. 긴 코드 축약 2. 다른 곳에서 코드 재사용할 때 3. 복잡한 코드를 작은 기능으로 나눌 때 사용함)
Component의 단점
component 를 많이 만들면 관리가 힘들다.
이유는 컴포넌트에 state를 가져다 사용하려고 할 때 문제가 발생한다. 한 function 안에 있는 변수를 다른 function에서 사용할 수 없기 때문이다. 이를 해결하려면 props 문법을 이용해야 한다.
그러므로 꼭 필요한 곳에만 component로 만들어 사용해야 한다.
Component 만들 때 주의할 점
1. component 작명할 때는 보통 영어 대문자로 작명한다.
2. return()안에는 html 태그들이 병렬적으로 여러 개 들어갈 수 없다. 하나의 태그로 시작해서 하나의 태그로 끝나야 한다.
3. function App(){} 내부에서 만들면 안 된다.
function App(){}도 함수, 컴포넌트 생성 문법이다. component 안에 component를 만들지 않는다.
즉, 다른 함수 바깥에 만들어야 한다는 말이다.
4. <component></component> 또는 <component /> 이렇게 사용한다.
아래 그림과 같은 화면에서 제목을 클릭하면 모달창처럼 뜨는 상세페이지를 만들어 보면서 Component 문법을 실습해 보자.
위와 같이 html, css 레이아웃을 만들었고 div modal을 컴포넌트로 만드려고 한다.
div modal을 Component로 바꿔 실행한 화면이다.
리액트에서 동적인 UI 만들기
1. html, css로 UI 디자인
2. UI의 현재 상태를 state로 저장
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
이제 만들어진 모달창에 동적인 기능을 부여해 보자.
1. html, css로 UI 디자인
2. UI의 현재 상태를 state로 저장
state를 하나 만들어 현재 UI 상태 정보를 저장해 둔다.
모달창은 열림/닫힘 두 상태만 있기 때문에 이 2종류를 표현할 수 있는 자료형이면 된다.
이렇게 작성해도 됨.
3. state에 따라서 UI가 어떻게 보일지 작성
저 state가 true면 <Modal></Modal>, false면 아무것도 보이지 않게 해달라고 작성하면 된다.
위와 같이 조건문 if / else 문법을 사용하면 되는데, 안타깝게도 JSX 안에서는 if / else 문법을 바로 사용할 수 없다.
하지만 if 문법 대신 삼항연산자는 JSX 중괄호 안에서 사용할 수 있다.
JSX에서 조건문 쓰는 법
조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 이렇게 if문 대신 쓸 수 있는 문법이 삼항연산자이다.
예를 들어 이렇게 작성하면 1 == 2는 거짓이기 때문에 콘솔창에 false가 출력될 것이다.
실행 화면.
다시 모달창으로 돌아와서 state가 true면 <Modal></Modal>, false면 아무것도 보이지 않게 해달라고 하려면?
삼항연산자를 사용해서 이렇게 코드를 짜면 된다.
null은 텅 비었다는 뜻으로 아무 html 남기기 싫을 때 쓰는 자료이다.
이제 글 제목 클릭했을 때 모달창이 나타나게 만들어 보자.
글 제목을 클릭하면 modal이라는 state를 true로 바꿔 달라고 코드를 작성했다.
실행해서 글 제목 클릭하면 모달창이 나타난다.
글 제목 한 번 더 클릭했을 때 모달창이 닫히게 만드려면?
if / else 문을 사용해서 지금 modal state가 true면 setModal(false)을, 지금 modal state가 false면 setModal(true)을 실행해 달라고 코드를 작성하면 된다.
