미친개발

아래와 같은 상황처럼 한 컴포넌트 안에서 만든 state를 다른 컴포넌트에서 쓰고싶은 경우가 있다. 주로 한 컴포넌트 안에 있는 다른 컴포넌트에 변수를 전달해줄 때가 많다. function App() { let [list1, setList1] = useState([1,2,3]); return( ); } function Modal(){ return( {list1[0]} ); } 하지만 위와 같이 코딩하면 해당 코드는 작동하지 않는다. JavaScript 특성상 한 함수 안에서 선언된 (지역)변수는 다른 함수에서 사용할 수 없기 때문이다. 따라서 이것을 해결하기 위해 React에는 props라는 문법이 존재한다. Component 태그 안에 변수명={변수자료}와 같이 속성을 주면 이 자료들은 컴포넌트를 선언..

https://logical02.tistory.com/32 JavaScript map 함수 array 객체 안에는 map()함수가 내장되어있다 파라미터로는 콜백함수를 사용하는데 array에 있는 자료 수 만큼 콜백함수를 반복해준다. 이 때 콜백함수에 파라미터를 넣으면 그 파라미터에 array의 logical02.tistory.com React에서 HTML안에는 중괄호를 써서 JavaScript 자료형을 쓸 수 있는데 for이나 while같은 반복문은 사용하지 못한다. 자료형만 쓸 수 있기 때문에 반복을 하고 싶을때는 array 객체 안에 있는 map()함수를 사용하여 반복한다. function App(){ return ( { [1,2,3,4].map(function(a,i){ return ( {a}번째 ..

동적인 UI 만들기 원칙 1. HTML CSS로 먼저 UI 디자인을 해놓는다. 2. UI의 현재 상태를 state로 저장해둔다. 3. state에 따라서 UI가 어떻게 보일지 조건문으로 작성한다. 아래는 Modal 컴포넌트가 있을 때 이 컴포넌트를 껐다 켰다 할 수 있는 기능을 만든 것이다. function App() { let [modalToggle, setModalToggle] = useState(false); return( 모달창 띄우기 { modalToggle == true ? : null } ); }

React에서는 긴 HTML을 한 단어로 치환할 수 있는 Component 문법을 제공한다 function App() { return( 123 ); } function 본문(){ return ( 제목 내용 ); } 이렇게 새로 만든 function 안에서 HTML 내용을 return 해주고 , 또는 으로 태그를 작성하면 만들어뒀던 함수안에 있던 내용들이 그 태그 안으로 들어가게 된다. Component를 만들때는 보통 작명할때 영어 대문자로 시작하는 관습이 있고, 새로 컴포넌트를 만들때는 function App() 밖에서 함수를 만들어야 한다. 또한 아래처럼 JavaScript ES6 신문법인 arrow function을 사용해도 된다. let 본문 = ()=>{ return ( HTML 본문 내용 ); }

React에서 Object, array 형태로 만들어진 State 변경하는 방법에는 여러가지가 있다. 그중 가장 간단한 것은 원본 list 값을 변경하고 그 list를 다시 변경함수에 넣어주는 것이다. let [리스트, 변경함수] = useState(['123', '456', '789']); 리스트[0] = '100' 변경함수(리스트); 근데 이렇게 하면 아마 변경이 안될거임 왜냐하면 React에서 기존 State랑 신규 State가 같으면 변경을 따로 안해주는데 저렇게 하면 리스트라는 변수가 가르키는 포인터 값이 같기 때문에 변경을 안해줌 그래서 아래와 같은 방법으로 바꾸는게 정석이다. let [리스트, 변경함수] = useState(['123', '456', '789']); let 복사본 = [.....

https://logical02.tistory.com/27 React 기본 사용법 JSX 문법 기초 0. 리액트는 프로젝트 폴더 내의 src 내에 있는 App.js에다가 코딩하면 됨 JavaScript 문법으로 쓰는데 정확히는 JSX 문법으로 사용함. import './App.css'; function App() { return ( '여기다가 코딩하면 됨' ); } expo blog.hym2n.site 저번에 html 안에 변수를 넣는 데이터바인딩을 알아보았다 그런데 데이터바인딩한 변수를 바꾸면 어떻게 될까? 일반적으로 let이나 var로 선언한 변수는 변수 값을 바꿔도 html 안에 데이터바인딩했던 글자가 바뀌지 않는다. 그 이유는 렌더링이 이미 끝나고 변수가 바뀔 때 재랜더링이 되지 않기 때문. 따라..

0. 리액트는 프로젝트 폴더 내의 src 내에 있는 App.js에다가 코딩하면 됨 JavaScript 문법으로 쓰는데 정확히는 JSX 문법으로 사용함. import './App.css'; function App() { return ( '여기다가 코딩하면 됨' ); } export default App; 대충 이런식으로 저 return 안에다가 html 방식으로 코딩하면 됨 return 안에는 하나의 태그만 써야하기 때문에 여러 태그를 쓸 때는 가장 바깥 쪽에 div 태그로 감싸주면 됨 CSS 스타일은 App.css 안에다가 작성하면 됨 .black-nav { background : black; ... } 1. JSX는 class 대신 className이라고 씀 코드를 짤 때 보면 평소 짜던 html과 다..

1. IDE 설치 우선 React는 Node.js 기반이기 때문에 Node JS를 설치해야함 구글에 Node JS 검색 후 설치 혹은 아래 사이트에서 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. IDE 설치 이 글에서는 VSCode를 사용함 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging moder..