React37 숫자만 입력 가능하게 하기 onChange(e){ const phone = e.currentTarget.value.toString(); if (phone === '' || /^[0-9\b]+$/.test(phone)) { setPhoneNumber(phone); ... } .. bugsdb.com/_ko/debug/0f258de8c2f0c7c21244e129d737c03e reactjs에서 텍스트 상자에 숫자 만 허용하는 방법은 무엇입니까? - BugsDB reactjs에서 텍스트 상자에 숫자 만 허용하는 방법은 무엇입니까? 정규 표현식의 reactjs 텍스트 상자의 숫자만 사용할 수 있습니까? 대답 기본 이념은: 제어 요소를 사용하기 (입력 필드 값과 onchange bugsdb.com 2020. 8. 31. Styled-Components (& ~ &, & + &) export const Thing = styled.div` padding-top: 0; & ~ & { padding-top: 5px; //은 의 형제이지만 바로 옆이 아닐 수도 있습니다. } & + & { padding-top: 13px; // 바로 옆의 } ` 2020. 8. 27. [Hooks] 3 : useReducer 기본 const [state, dispatch] = useReducer(reducer, initialArg, init); const result = () => { dispatch(action); } reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수입니다. useReducer의 첫 번째 파라미터에는 reducer 함수를 넣고, 두 번째 파라미터에는 해당 reducer의 기본값을 넣어 state 값과 dispatch 함수를 받아와서 dispatch(action)과 같은 형태로 action 값을 넣어주면 reducer 함수가 호출되는 구조입니다. useReducer vs useState useReducer는 useState보다 더 다.. 2020. 8. 26. [Hooks] 2 : useEffect useEffect는 컴포넌트가 렌더링되고 난 직후마다 특정 작업을 실행하며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라집니다. 마운트될 때만 실행하고 싶을 때 useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다. useEffect(() => { console.log('마운트될 때만 실행됩니다.'); }, []); 특정 값이 업데이트될 때만 실행하고 싶을 때 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다. useEffect(() => { console.log(name); }, [name]); 뒷정리하기 useEffect는.. 2020. 8. 26. setUrl / handleUrl const [url, setUrl] = useState(''); //페이지 로드시 현재 language 값을 받아서 url을 세팅한다. useEffect(() => { setUrl(`url/${lang}/url`); }, [lang]); 링크 2020. 8. 26. [React 스터디] 2 : 접근성 접근성이란? 사용자가 신체적 불편함이나 장애 여부와 상관없이 웹에 접근할 수 있도록 고려하는 것으로 img태그에 대한 대체 텍스트, 건너뛰기 링크, 레이블 제공 등으로 접근성을 높일 수 있다. 시맨틱 HTML class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 의 출력 결과는 다음과 같습니다. Hello World 렌더링 된 HTML이 유효하려면 가 여러 엘리먼트만 반환해야 합니다. 의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않습니다. Fragments는 이.. 2020. 8. 21. React Context Provider Login GlobalContext.js const GlobalContext = createContext({ state: { isLoggedIn: false, }, actions: { setIsLoggedIn: () => {}, }, }); const GlobalProvider = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(); const value = { state: { isLoggedIn, }, actions: { setIsLoggedIn }, }; return ( {children} ); }; App.js if (!isLoggedIn) { return ; } else { return ( ... Login.js const Login = (.. 2020. 8. 18. [React 스터디] 1 : 주요 개념 https://blex.me/@yoyounn18/react-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%AC-react%EB%8A%94-%EC%99%9C-%EB%B9%A0%EB%A5%B4%EB%A9%B0-%EA%B0%81%EA%B4%91%EB%B0%9B%EB%8A%94-%EA%B8%B0%EC%88%A0%EC%9D%B8%EA%B0%80 React 소개 및 작동 원리 (React는 왜 빠르며 각광받는 기술인가) React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발 페이스북, 인스타그램 등 넓게 사용되는 중 class HelloMessage extends R.. 2020. 8. 16. 조건부 렌더링 {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. } {isLoggedIn ? ( ) : ( )} 2020. 8. 10. 이전 1 2 3 4 5 다음
