리액트 Component문법, 삼항연산자, .map()

• Component 예시
• component 만드는 방법/ 특징
• 동적인 ui만들기
• 삼항연산자

 

 Component의 예시

<div>
     <h4>제목</h4>
     <p>날짜</p>
     <p>상세내용</p>
</div>
    이거를
    
    
    function Modal() {
      return (
        <div>
          <h4>제목</h4>
          <p>상세내용</p>
        </div>
      );
    }
    
function App() {
  return (
  	<div>
      <Modal></Modal>
    </div>
  );
}

요렇게 사용이 가능게 만들어줍니다.

 

만들 때 주의점 

1. component 작명할 땐 영어대문자

2. return () 안의 첫번째 코드는 무조건 <div>로 감싸줘야한다. 형제태그로 못들어갑니다.

3. function App(){} 외부에서 만들어야 합니다.  왜냐면 function App(){} 이것도 하나의 컴포넌트 생성문법입니다.

component 안에 component 를 만들 수는 없습니다.. 

4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 됩니다. 

 

 

 component는 언제 만들어서 사용할까요?

- 사이트에 반복해서 사용하는 HTML 덩어리.

- 자주 변경될 것 같은 HTML 부분들.

- 다른 페이지를 만들고 싶다면 해당 페이지의 HTML 내용을 하나의 Component로 만드는게 좋습니다.

- 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 합니다. 

 

 

  동적인 UI만들기

1.  하드코딩으로 디자인 하기
2.  UI 현재 상태를 state로 저장하기
3. 어떻게 동작할지 조건문 작성

function App() {    
  return (
    <div className="App">
        <Modal/>
    </div>
  );
}

위에 만들어 놓은 modal를 가져와서 사용합시다. => 하드코딩 끝

 

const [newModal, setModal] = useState(false); => 현재 상태 state로 저장하기

 

true면 모달을 지우고 false이면 모달을 띄워주세요. => 조건문 만들기

 

 

 삼항연산자

조건식 ? 조건식이 참일때 실행할 코드 : 조건식이 거짓일 때 실행할 코드

function App() {    
  return (
    <div className="App">
        {
        newModal == true ? <Modal /> : null
        }
    </div>
  );
}

newModal == true ? <Modal /> : null

결국 true이면 <Modal /> 이 나타나고 false이면 null이므로 아무것도 안나타날 것입니다.

 

tip!

!true을 출력하면 false가 되고 !false를 출력하면 true가 나옵니다.

 

ex)onClick에 setModal(!newModal)를 넣어주면 홀수번, 짝수번 누를때마다 false/true로 바뀌므로 Modal를 썻다가 지웠다 할수 있습니다.

 

 

 map( )

array자료뒤에는 .map()를 사용 할 수 있습니다.

 

특징

• array의 갯수 만큼 반복 실행해줍니다.
• [array].map()안에는 항상 콜백함수가 와야합니다. [array].map(function( ){ })

const 변수값들 = ["a","b","c"];
변수값들.map(function(){
	console.log("실행됨")
})
//콘솔창에 실행됨이 3번 나온다.

 

 

• 콜백함수 안에 파라미터를 하나를 작명해서 넣어주면 해당 파라미터는 array의 값이 됩니다.

const 변수값들 = ["a","b","c"];
변수값들.map(function(h){
	console.log(h)
	})
//a,b,c가 순차적으로 나옵니다.

 

 

• [array].map(function( ){ return("울랄라") }) return뒤에 값을 넣어주면 array의 값이 됩니다.

const 변수값들 = ["a","b","c"];
변수값들.map(function(){
	return("나는 천재다.")
	})
//a,b,c가 ["나는 천재다.","나는 천재다.","나는 천재다."]이렇게 바뀌고 세번 실행됩니다.

 

 

• 두번째 파라미터를 넣어주면 0부터 1씩증가합니다.

const 변수값들 = ["a","b","c"];
변수값들.map(function(h,i){
	console.log(h,i)
	})
//콘솔에 a 0 ,b 1, c, 2가 나옵니다.

 

 

• map을 사용해서 여러 div를 만들었다면 최상위의 부모에게 key 값을 즉 고유의 값을 줘야한다.

const 변수값들 = ["a","b","c"];
변수값들.map(function(h,i){
	return("<div id={i}>{h}</div>")
	});
//div의 키값은 순차적으로 0,1,2가 됩니다.

 

useState문법 쓰는이유

[react] - 리액트 강의처럼 독학 배우기

리액트 강의처럼 독학 배우기