인간이 되고 싶은 원숭이

오늘은 리액트 숙련주차들 좀더 잘 하기 위해 기초부터 강의를 쭉 들었다. 그래도 아직 혼자 코딩을 하려면 힘든것 같다. 오늘 한 일 🔥 1. 알고리즘 공부 2. Javascript 와 React 공부 3. 프로그래머스 "3진법 뒤집기 문제 풀기" 3진법 뒤집기 🔥 // 일단 n을 toString(3)으로 3진법으로 만들어준다 const jin = n.toString(3); // split('')메소드를 사용해서 하나하나씩 배열로 바꾼 다음 reverse()메소드를 사용해서 뒤집어줍니다. 그리고 join('')메소드를 사용해서 나누어진 배열을 하나로 묶어줍니다. let sp = jin.split('').reverse().join(''); // 그리고 지금은 문자열로 되어 있기 때문에 number 로 바꿔주..

저는 이런 스텝으로 개발을 진행해보았습니다. 1. 일단 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장부터 할 것입니다. (중요한 데이터는 일단 저장해두는게 좋으니까요) 2. 버튼을 누르면 그 state를 [글제목이라는 state] 어레이의 뒤에 하나 뿅 추가할 것입니다. 이게 끝입니다. 그러면 알아서 글이 4개 보일 것입니다. 왜 4개가 알아서 보이냐고요? state 변경하면 HTML도 알아서 재렌더링 되니까요. 그러니 div를 하나 더 만들어주세요~ 이런 코드는 필요가 없습니다. state만 변경하면 됩니다. 1. 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장하려면 기억이 안난다면 바로 저번 시간 input 다루기 강의를 참고하시면 되겠군요. fun..

실제 사이트엔 이런 것들이 매우 많습니다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데 리액트에서 input 데이터는 어떻게 처리하는지 알아봅시다. 실은 쌩 자바스크립트 문법이랑 똑같습니다. 그리고 map 반복문 쓰면 콘솔창에 warning 뜨는 것도 마지막 부분에서 해결해보도록 합시다. 사용자가 input에 입력한 데이터를 state로 저장하는 법 사용자가 input에 입력한 데이터는 역시나 중요한 데이터기 때문에 state 저장해서 쓰는게 일반적입니다. 저장부터하는 법을 알아봅시다. 저장하려면 일단 빈 state가 하나가 필요할테니 state를 하나 만들어봅시다. function App (){ let [입력값, 입력값변경] = useState(''); return ( HTML..

오늘부터 TIL 을 쓰기로 했다. 개발 공부한지는 18일이나 지났지만 한 번 제대로 기록해 보고 싶어서 이제야 적는다 드디어 내일부터 React 4주차 숙련에 들어간다 어떡하지 3주차 기초도 제대로 이해하지 못 했는데 항해 하다가 파도 만나서 휩쓸리면서 가는거 같다. 뭐가 뭔지 모르겠다. 그리고 슬슬 항해 하면서 배에서 뛰어내린 사람들이 점점 늘어나기 시작했다. 3주차 시작하고 3일인가 지났을 때 우리팀이 4명이었는데 눈떠보니 3명이 되어 있었다. 물어보니 그만 두었다고 한다. 다른 팀에도 한 분이 나갔다고 한다. 나는 무조건 노 꽉 잡고 계속 저어야 겠다. 오늘 한 일 🔥 1. React 3주차 과제 제출하기 2. React props 와 state 공부 3. 다른 강의 들으면서 홈페이지 제작해보기

App이라는 컴포넌트안에 이라는 컴포넌트를 만들어보았습니다. (이걸 전문용어로 부모 자식관계라고 합니다. App은 부모 컴포넌트고 Modal은 자식 컴포넌트입니다.) 근데 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 갖다 쓰고싶을 때가 가끔 있습니다. 그럴 땐 대충 { 부모에 있던 state이름 } 이렇게 쓰시면 안되고 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이렇게 쓰셔야합니다. 뭔소린지 알아봅시다. 에 실제 제목 데이터바인딩을 해봅시다 저번에 만든 내부의 제목에 실제 데이터를 집어넣고 싶으면 어떻게 하죠? 실제데이터는 글제목이라는 state변수가 있으니 그걸 그대로 집어넣으면 되지 않을까요? 예를 들면 이렇게 하면 될 것 같지 않습니까 function ..

리액트환경에선 for 반복문을 이용해 HTML을 줄일 수도 있습니다. 그냥 반복문 적고 안에 HTML 담으시면 끝입니다. 하지만 JSX 코딩하던 중간중간에 for 반복문을 직접 쓸 수는 없고 특별한 방법이 좀 필요합니다. 함께 알아봅시다. 자바스크립트 map 함수 쓰는 법 JSX 중간중간 중괄호 열고 { 변수명 } 넣던거 기억나시죠? 그럼 반복문도 중괄호 안에서 { for (){} } 이렇게 집어넣을 수 있지않을까라고 생각할 수 있겠지만 {} 중괄호안에는 변수, 함수 이런 것만 입력가능합니다. 그래서 중괄호 안에서 쓸 수 있는 map 이라는 반복문을 이용합니다. 반복문은 아니고 array에 붙일 수 있는 일종의 내장함수인데 뭔지 자세히 알아봅시다. array 자료형이 하나 있다고 칩시다. array 안의..

클릭하면 등장하는 간단한 UI는 어떻게 만드는지 알아봅시다. 쌩 자바스크립트에선 display : block 이런 스타일을 조정해서 보여주고 안보여주고 했었는데 리액트에선 모달창이 현재 보이는지 안보이는지 state를 저장해둔 뒤에 if문을 사용해서 state에 따라 모달창을 보여줍니다. 글만 읽으면 뭔소리인지 이해가 안되니 밑에서 자세히 알아봅시다. 리액트에서 HTML UI를 조건에 따라 보여주고 싶으면 특정상황에 맞춰서 HTML을 보여주고 안보여주고 이런건 if문을 이용하시면 됩니다. 그럼 만약에 특정 조건이 참일 때만 을 보여주고 싶으면 어떻게 할까요? function App (){ return ( HTML 잔뜩있는 곳 { 1 < 3 ? : null } ) } ▲ 실은 리액트 중괄호 내에서 if문을..

복잡한 HTML들을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. Component라고 합니다. 이걸 이용하시면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. 우리 방금 만든 모달창도 깔끔하게 한 단어로 치환해봅시다. 이렇게 따라합니다. function App (){ return ( HTML 잔뜩있는 곳 ... ) } function Modal(){ return ( 제목 날짜 상세내용 ) } ▲ 이렇게 하시면 원하는 HTML을 한 단어로 줄일 수 있습니다. 줄이는 법은 1. function을 이용해서 함수를 하나 만들어주시면 되고 2. 그 함수 안에 return..