Age of Discovery

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 역시나 마찬가지로 리스트로 사용할 state를 작성한 후 이번엔 input text박스에 글을 입력했을 시 배열을 추가해서 리스트 맨앞에 생성되게 해보자 { let input_text = document.querySelector('.input-text'); if (input_..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전 게시글과 마찬가지로 State를 4개 생성한 후 list로 작성하여 화면에 띄워주고 props파라미터를 넣어 Modal창을 만든 후 띄워줬다 리스트의 각 타이틀을 클릭했을 때 모달창의 상세정보도 클릭한 선수들의 내용으로 변경하고싶다 지금은 변경이 안된다. 조작해보자! le..

props는 자식 컴포넌트가 부모 컴포넌트의 State를 편하게 사용하기 위해 고안된 기능이다. let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전편과 마찬가지로 역시나 상단의 배열들을 State로 저장해준 후 자식 컴포넌트를 하나 만들어준다. let Modal = () => { return( 선수 이름 생년월일 주사용발 ..

map함수는 사실 react에 국한되는 내용은 아니다. JS에 있는 함수를 그대로 react에 적용시킨것 뿐 let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['92년생', '92년생', '97년생']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) State로 배열을 생성해놓은 후 { player_name.map(function (a, i) { return ( { a } {player_age[i]} {footed[i]} ) }) } map함수는 배열내의 요소..

html태그를 덩어리로 묶은 함수를 component라고 하는데 이 component를 조작해 토글버튼으로 켰다 껐다 해보자 let Modal = () => { return( 제목 날짜 상세내용 )} 이렇게 생긴 component를 생성했다. function App() { let [modal, setmodal] = useState('닫힘'); return ( { setmodal(modal == '닫힘' ? modal = '열림' : modal = '닫힘') }}>모달 스위치 { modal == '닫힘' ? null : } )} State로 modal을 생성하고 '닫힘' 문자를 저장한다 버튼을 생성 후 setmodal함수로 modal이 '닫힘' 일때는 버튼 클릭시 '열림'문자로 바꿔주고 '닫힘'이 아닐때는..

​ 이번에 프리미어리그 공동득점왕을 수상한 '살라'와 '손흥민'을 배열로 저장해 state로 조작해보겠다. let [Top_player, setplayer] = useState(['살라', '손흥민']); 버튼을 만든 후 { let copy = [...Top_player] copy[0] = copy[1] setplayer(copy) }}>눌러봐 버튼 속성으로 onClick속성을 넣고 화살표 함수안에 지역변수로 배열을 새로 복사해준다 ​ 기존의 배열을 그대로 사용하지않고 따로 복사하는 습관을 들이는게 좋다 원본을 해치지 않기 때문 ​ 그리고 let copy = [...Top_player] 여기서 [... a] 은 스프레드 연산자로 쉽게 메모리의 주소값을 복사하는게 아니라 새로운 값을 복사해줄 수 있기 때문..

확실히 블로그에 기록을 남기면서 공부를 하다보니 훨씬 기억에 오래남는다. ​ 이번엔 State사용해서 눌렀을 때 바로 숫자가 변하는 버튼을 만들어보자 ​ let [like, btn_change] = useState(0) { btn_change(like + 1)}}>좋아요! {like} like라는 state에 0을 할당하고 button을 만들어 onClick속성을 함수로 넣어주었다. ​ 여기서 let [like, btn_change] = useState(0) 두번째 인자(btn_change)는 첫번째 인자를 변화시킬 수 있는 함수를 뜻한다. { btn_change(like + 1)}}>좋아요! onclick속성안에 btn_change(like+1)을 넣어주면 버튼을 클릭할때마다 {like} 제일 위의 s..

그 동안 JS 변수 var, let, const에 대해서만 배웠었는데 리액트에서 쓰는 State라는 변수를 알아보자 ​ let title_1 = 'YNWA'; {title_1} 이렇게 사용하던 변수를 let [title_1, b] = useState('YNWA') {title_1} 이렇게도 사용할 수 있다. ​ 왜 굳이 더 길게 써야하느냐? 변수가 변경됐을 때 새로고침없이 재렌더링이 가능하기 때문이다. ​ ​ 기존 변수를 사용했을 경우엔 새로고침을 해야 유저가 변하는 부분을 확인할 수 있지만 State를 사용했을 시 변수가 변경돼도 홈페이지를 리로드하지않고 바로 변화시킬 수 있다 ​ 사실상 react를 사용하는 핵심이유라고 생각한다. ​ 또한 let [TeamName, a] = useState(['LIV..

언젠가 꼭 학습해야하는 걸 알고 있었지만 바닐라 JS를 완벽하게 마치고 하려다보니 그 핑계로 자꾸 미루는 거 같아서 오늘부터 당장 배우기 시작했다. import blahblah; function App(){ return ( // 원하는 코드 )}; 리액트 설치와 환경세팅은 생략하고 기본 틀은 이렇다 ​ 주석처리된부분에 본인이 원하는 코드를 집어 넣으면 되는데 HTML파일을 따로 두지 않고 JS파일내에서 html 태그를 사용하며 바로 동작 시킬 수 있다. ​ 그로인한 문법의 변화는 감안해야하고 이 문법을 JSX 라고 한다. ​ ​ JSX의 특징 1) // 원하는 코드 html 에서는 class명을 삽입할때 class = "aa"였지만 JSX 에서는 className="" 으로 선언한다. ​ ​ 특징2) f..