TIL # 33 (React 기초 강의 리뷰)
React에서는 HTML 대신 JSX를 사용해야 한다. 🤐 App.js에서 작업한다.
1. 태그에 class를 주고 싶으면?
<div classNmae="클래스명">
2. 리액트에서 데이터 바인딩 쉽게하는 법 {변수명, 함수 등}
let posts = '강남 고기 맛집';
<h4> {posts} </h4>
3. 이미지 넣기
img src = { logo } />
4. JSX에서 style 속성 집어넣을 때 camelCase 사용하기
<div style= { { color : 'blue', fontSize 30px } }>개발 Blog</div>
5. 리액트의 데이터 저장공간 state 만들기 {useState}
[state데이터, state 데이터 변경 함수] 변수 대신 쓰는 데이터 저장공간이다. state는 변경이 될 때 html이 새로고침 없이도 자동으로 재렌더링 된다. 그냐 변수는 변경되어도 재렌더링이 안된다. 즉, html이 새로고침 없이도 스무스하게 변경되기 때문에 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 쓰자.
let [글제목, 글제목변경] = useState('남자 코트 추천');
<h3> {글제목 } </h3>
문자, 숫자, array, object 다 저장 가능.
6. 좋아요 버튼 만들기
let [따봉, 따봉변경] = useState(0);
<h3> {글제목[0] } <span onClick={ ()=>{따봉변경(따봉+1)} }> 👍</span> {따봉} </h3>
7. 버튼을 누르면 첫째 제목이 '여자코트 추천'
수정된[데이터]를 만든다. 그리고 state의 복사본을 만들어서 수정하자. 그냥 복사하는 것이 아니라 state를 deep copy해서 수정하자. deep copy는 값공유를 하지 않는 서로 독립적인 값을 가지는 복사이다.
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자 코트 추천'
글제목변경(newArray)
//글제목에 있던 0번째 데이터를 여자코트 추천으로 바꿈
<button onClick={ 제목바꾸기 }>버튼</button>
}
8. component로 HTML 깔끔하게 줄이기
component 이름은 대문자로, 대괄호로 만들기. return()안에 있는 건 태그 하나로 묶어야 한다. 반복출현하는 HTML 덩어리, 사이트에서 자주 변경되는HTML UI들, 다른 페이지를 만들 때 컴포넌트로 만드는게 좋다. 다만, state를 쓸 때 복잡해진다.
<Modal></Modal>
</div>
);
}
function Modal(){
return(
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
Author And Source
이 문제에 관하여(TIL # 33 (React 기초 강의 리뷰)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peng0code/TIL-33-React-기초-강의-리뷰저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)