React 기초(1)-JSX

jsx란?

JSX란 
Javascript를 확장한 문법입니다.

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React 공식문서

 

 

JSX 문법 1 

HTML 에 class 넣을땐 className을 쓰자

 

JSX 문법2

변수를 HTML에 넣을때는 { 중괄호 } 를 쓰자

-자바스크립트 문법을 쓰면 document.getElementByld().innerHtml 을 쓰지만 리엑트는 쉽게 데이터를 넣을수있다

예시1

  function App(){
 let posts = '강남 우동 맛집';
return (
<div className ="App">
<div className = "black-nav">
<div> 블로그임 </div>
<div>{post}</div>
</div>
</div>
)
}
 
 
/*출력 결과 
<div>강남 우동 맛집</div>*/

예시2 

데이터 바인딩: href, id ,className,src등 여러가지 html 속성에도 {중괄호}를 열어 변수를 집어넣을 수 있다.

 

 function App(){
 var date = 'red';
return (
<div className ="App">
<div className = "black-nav">
<div> 블로그임 </div>
<div className = {data}안녕하세요</div>
</div>
</div>
)
}
 
/*출력결과
<div className= "red">*/
 

JSX 문법3 

html에 style 속성을 넣어 보자

 

<div style = "color : blue">와 같은걸 넣고 싶다면

JSX 상에서는 {속성명 : '속성값'}을 넣으면 된다.

 

<div style = {{color : 'blue' , fontsize :'30px'}}>글씨</div>

 
<div style = {{color : 'blue' , fontsize :'30px'}}>글씨</div>

state

🤷‍♀️변수 말고 state에 데이터를 저장해서 쓰는이유🤷‍♀️

변수 말고 state에 데이터를 저장해서 쓰는이유는 state 는 변동 사항이 생기면

html도 자동으로 재렌더링 해주기 떄문이다.

 

원하는 곳에서 useState('보관할 자료')를 쓰면 state에 자료를 저장할 수 있다.

나중에 저장한 자료를 쓰고 싶으면 

let [a,b] = useState('강남 우동 맛집 ');

이런식으로 a 자리에 state 이름을 자유롭게 작명하고 사용하면 된다.

 

let num = ['kim',20]

let [name , age] = ['Kim' ,20]

// let name = num[0]

// let age = num[1]

=>이렇게 destructuring 문법을 사용해서 변수선언 가능!

 function App()
{ let posts = '강남 우동 맛집';
 let[글제목,글제목변경]= useState('남자 코트 추천');
 
return (
<div className ="App">
<div className = "black-nav">
<div> 블로그임 </div>
<div>{글제목}</div>
</div>
</div>
)
}
 
/*출력결과 : 남자코드 추천 */

function App(){
  let post = '강남 우동 맛집'
 
  return (
    <h4>{ post }</h4>
  )
}
 

그 변경사항을 html에 반영되고 하고싶다면?

 

자바스크립트는 변수 내용 바뀌었으니 html도 고쳐야함 but 

function App(){
  let [글제목, b] = useState('남자 코트 추천');
 
  return (
    <h4>{ 글제목 }</h4>
  )
}

이렇게 state를 만들어 {글제목}으로 데이터바인딩 한다면 자동으로 html도 바뀌게 된다.

 자주 쓰고 자주 변하는데이터를 저장해주는게 좋겠다.

---

state를 활용한 예시

 

array 자료를 활용해서 버튼을 누를때마다 +1 씩 증가하는  기능을 만들어보자!

 

1. 왼쪽부터 0 번째 자료에 있는 0에 버튼을 하나만들고

function App(){
  
  let [따봉] = useState(0,3,4,5,6);
  return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
  )
}

function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

3.state 변경함수를 사용해서 이렇게 코드를 짜주면됩니당

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )

이런식으로 써도 됨 !_!

 

---

클릭하면 글 수정되게 만들어보자!

1번째 방법

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    } }> 수정버튼 </button>
  )
}

 

2번째 방법

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목];
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )
}

 

=>array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는

기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. 

 

---

클릭하면 ㄱㄴㄷ순으로 정렬되게 만들어보자!

-sort 정렬을 사용해보면 됨!

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목];
      copy.sort();
      글제목변경(copy)
    } }> 정렬버튼 </button>
  )
}

 

완성!!