항해99 TIL05 JSX

JSX 형식에서

 

return 에  요소와 태그속성 등이 들어가는데 이때 if 문이나 for 문등 들어갈수없다.

이럴때는 내장함수 map, filter 등을 써서 대신하는데 이때 if 문을 쓸때 삼항연산자를 사용하는 경우가 많다.

그런데 삼항연산자 말고도 꼭 써봐야겠다 생각한것이 && 연산자 || 연산자 였다. 단순히 and 와 or 기능도 있지만

자바스크립트 특성상 왼쪽이나 오른쪽값을 출력한다. && 먼저보면 true && true 일경우 오른쪽 true 을 출력하고

true && false 일경우 오른쪽 false 출력, false && true 일경우 왼쪽 false 출력, false && false 일경우 왼쪽 false 출력한다.

단순히 && 를 통해 둘다 참인지를 비교하는것도 있지만 어디까지 검사를 하고 그 검사한 부분값을 출력한다는 특징을 잘 알아야한다.

처음시작 왼쪽이 참일경우 오른쪽도 참인지 확인해야하고 그때 끝나는건 true 거나 false 인데 그걸 js 에선 출력해준다.

false && true 같은경우 왼쪽을 시작으로 비교를 해야하는데 이미 왼쪽 false 이므로 js 는 false 를 출력한다. 따라서

 

return(  <div> {비교대상 && <p>참이면 이걸 출력 </p> }</div> )

 

이라고 한다면   왼쪽이 참이 되면 오른쪽이 거짓이던 참이던 마지막검사이므로 출력해준다. 이렇게 단축하여 비교하여 출력해줄수도있다.

하지만 이건 어디까지나 조건이 만족할때를 값을 출력, 아니면 false라는  이분법적인 결과일때만 쓰고 만약 else 로 false가 아닌 다른값을 출력해야한다면 기존의 삼항연산자로 하면된다.

이때 <div></div> 등 태그 사이에서 컨텐츠안에도 쓸수있지만 요소특성 부분에도 쓸수있따 예를들어

 

<div style ={{ backgroundColor  :  value < index ? "red" : "white" }} 

 

라는 식으로 어떤 조건에따라 빨간색을 할지 하얀색을할지 출력해줄수도 있는것이다. 요번 과제프로젝트를 통해 배우고 습관을 바꿔야겠다고 생각한것이 너무 for,if 문에 의지하거나 사고하지 말아야겠다고 생각했다. 이렇게되면 제한이 많아 제대로 구현할수없다. 따라서 내장함수인 map, filter, from , 등등을 잘 사용할줄 알아야 jsx에 응용하기 좋다고 생각했다. 삼항연산자나 &&연산자가 return 안에서 쓸수있는지도 몰랐기때문에 단순하게 접근하게 되고 return 에 내가 넣을 없다라는 생각때문에 그 위에 쓸수있는게 한정적이다보니 어거지식으로 만들었던거 같다.  

 

useParams 

 

useParams 같은경우 URL 주소뒤에 값을 페이지이동시 값으로 가져올수있다. 단 <Route> 안에 path 를 설정할때 /뒤에  꼭 : 를 붙여야한다 그렇게하면 : 뒤에있는 값을 params 값으로 갖겠다는건데,

url 뒷값을 받을 js 파일에 useParams 를 변수에 넣어준다.

 

 

다음과같이 App.js 에서 :week_day 라고 설정해주었다.

그다음 Main.js 에서 평점남기기로 넘어가는 삼각형을 누를때 history.push 를 이용하여 URL 값을 바꿔준다.

뒤에 ${w.day} 라고 나와있는데 `` 백틱을 사용하여 어떤 값을 넣어주려고 한건데 그값이 해당 요일을 담고있는 객체의 값이다 따라서 w객체의 day값이 온다. 예를들어 클릭한 구간 w.day 이 "일" 이였다면 처음 App.js 에서 설정해준 week_day 값은 "일" 이 된다. 이를 콘솔로 찍어보면 console.log(params)

이런식으로 나온다.

처음 저렇게 선언 할당해줬기때문에 콘솔창에 '일'이 뜬것이다. 

 

이게 왜 중요하다고 생각했냐면 리액트 컴포넌트의 특성은 단방향데이터바인딩으로 이루워지는데 

부모컴포넌트인 App.js 와 자식컴포넌트인 Main.js , review.js 에서 형제관계둘은 부모에게서만 값을 받을수있고 서로 줄수가없는데  주기위해선 redux 를 이용해야하지만,

이렇게 params 를 사용할경우 부모 컴포넌트 Route 안에 :url값 이 있으므로 그걸 그대로 review에 줄수있기때문이다.