전체 글 (131) 썸네일형 리스트형 [ReactJS] 시/분 변환기로 state 활용해보기 - 1 JS (label은 input 옆에 써줄 수 있는데 label을 클릭하면 input이 선택되게끔 기능한다) JSX에서는 그런데 틀린 문법이다. (이렇게 for 로 label과 input를 연결해 주는 것이 말이다.) for는 class 처럼 JavaScript 에서 reserved 된 용어이다. JavaScript에서 선점된 문법 용어를 사용 못한다. JSX는 HTML과 비슷해 보이는 점들이 많지만 반드시 기억해야할 다른 점들이 있다. 태그 속성으로 class를 쓰려면 className 이라고 써야하고 for는 htmlFor이라고 써야한다. react, reactdom을 import하는 script tag에서 production - > development 로 변경하는데 production은 배포 모드,.. [ReactJS] State 값을 함수로 수정하는 방법. const [counter, setCounter] = React.useState(0); const [counter, setCounter] = React.useState(0); JS의 문법에는 이렇게 배열의 인자에 바로 이름을 줄수 있다. React.useState() 는 배열을 반환하는데 그 배열은 두개의 요소를 가진다. 첫번째 요소는 State라고 불리는 data를 나타내는 값이다. 두번째 요소는 Modifier라고 불리는 첫번째 요소인 state의 값을 수정하는 함수(function)이다. 현재의 코드에서는 counter라는 이름의 state setCounter라는 이름의 modifier가 선언된 것이다. 또한 ReactJS는 데이터가 바뀔때마다 컴포넌트를 리랜더링하고 UI를 refresh 한다. m.. [ReactJS] useState(), modifier, modifier function은 인자를 받는데 어떤 값을 넣어주던 그 값으로 data 를 업데이트 하고 리랜더링을 해준다. modifier가 인자로 어떤이름으로도 쓸수 있지만 다 state를 의미한다. modifier라는 함수 안에서 또다른 함수를 넣어줄때 인자로 들어가는 것이 state임을 기억해두면 좋다. modifier( (current) => current + 1)) 와 같이 말이다. current는 modifier의 state, 아래 코드에서는 counter를 의미할 것이다. modifier() 안에 넣어준 인자가 1. data 값을 업데이트 하고 2.다시 리랜더링 해주는 것과 동일한 역할을 수행한다. const 는 재할당 불가 ex. const foo = 1; foo = 99; // 원시값 .. [JavaScript] 배열의 각 요소들을 각각의 새로운 변수로 할당하는 간단한 방법 어떻게 배열에서 요소들을 꺼내 이름을 붙여줄 수 있을까 ( JS에는 이러한 기능을 하는 구문이 있다.) const myFavFood = food[0] 를 한것과 동일하다 이렇게 배열의 요소 중 일부에게도 동일하게 이름을 지어줄 수 있다. [ReactJS] 왜 React JS를 쓰는가? (7) : state- 기본적으로 데이터가 저장되는 곳, React.useState() React JS 에서 정보를 저장하는 최고의 방법 자동으로 리랜더링을 시킬 수 있는 방법 리랜더링을 위해 ReactJS가 가지고 있는 기능 React를 다룰 때 데이터를 어디에 저장하면 될까? 그전에는 let counter = 0; 와 같이 데이터를 다루어주었다. 이것이 문제가 되는 것은 아니지만 React.useState() Array 하나를 받았다. undefined 값과 함수를 지닌 배열을 받았다. undefined 는 우리의 data 고 function 은 우리가 이 data를 바꿀 때 사용하는 함수이다. React.useState() 를사용하면 배열을 return 받는다. 첫번째 인자는 data, 두번째 함수는 첫번째 인자를 수정할 수 있는 함수이다. 함수의 인자에 초기 값을 0을 주면 0이란 .. [ReactJS] 왜 React JS를 쓰는가? (6) : 변수를 JSX에 전달해 주는 방법- ReactJS 랜더링의 강점 변수를 JSX에 전달해 주는 방법. vanilla JS 에서는 document로 가져온 element에다가 .InnerText("") 이런 식으로 값을 전달해 줬는데 JSX에서는 {} 중괄호만 열어주고 변수명을 넣어주면 된다. 컴포넌트를 랜더링을 한번만 현재 해주고 있다. 그래서 값은 올라가나 UI가 업데이트 되지 않는 문제가 있다. Container 컴포넌트가 랜더링 된다는 것은 div h3 같은 JSX 코드가 React Element로 변환됨을 의미한다. 하지만 한번만 랜더링이 이뤄지고 그 뒤에는 이뤄지지 않는다. 따라서 한번더 해줘야 한다. 반복되는 작업이기에 reRender() 라는 함수를 선언해주고 코드를 수정해 주었다. 하지만 이런식이면 데이터를 수정할때마다 render를 다시해주는 걸 잊으면.. [JavaScript] Arrow Function (), {}, 소괄호, 중괄호의 차이 arrow 쓸 때 한 줄로만 나타낼 수 있으면 {} 생략할 수 있습니다. 함수 내용이 여러 줄일 경우 {}로 묶어주고 리턴되는 내용은 ()로 묶어서 나타낼 수 있습니다. arrow function 은 () => {} 이런형식으로 많이 쓴다. () => () 이렇게도 쓸수 있다. ReactJS를 쓰는 JSX 에서는 컴포넌트를 함수로 만들어 줄때 소괄호를 쓴다. 또 이런 경우 {} 중괄호는 오류가 발생된다. 왜일까? () 는 return을 포함한 구문이었던 것이다. 따라서 {} 중괄호로 구문을 여는 것은 데이터를 처리해주고 값을 반환하지 않아도 될때 이용하면 된다. 예를 들어 text 수정 , 값 연산 반면에 JSX에서 작성해준 태그를 함수로 만드는 것은 함수의 형식만 빌리고 바로 반환을 해줘야 하기 때문에.. [ReactJS] 왜 React JS를 쓰는가? (5) : JSX, Babel -컴포넌트를 다른 컴포넌트 안에 넣기 const container = React.createElement("div", null, [Title, Button]); ReactDOM.render(container, root); 이전에 작성한 부분에서의 createElement 부분을 JSX 방식으로 수정해주고 싶다. arrow function으로 간단하게 변환해 주었다. arrow function 은 return을 적어준 일반 function과 같음을 알자 이렇게 적어주는것과 동일하다. 함수로 만들었으니깐 JS 때 처럼 저렇게 (), 소괄호를 쳐주고 싶다는 생각이 들지만 JSX 규칙에서는 HTML 태그 처럼 활용해주면 된다. img 태그 였다면 라고 써줬을 것처럼 말이다. 컴포넌트의 첫번째 글자는 대문자여야 한다! 소문자라면 react 와 JS는.. 이전 1 2 3 4 5 6 7 8 ··· 17 다음
